css垂直居中怎么设置?文字上下居中和图片垂直居中

  css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题。垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下。

css文字上下居中:一、单行内容的居中。只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了。css代码为{height: 4em;line-height: 4em;overflow: hidden;}

  优点:1. 同时支持块级和内联极元素;2. 支持所有浏览器   缺点:1. 只能显示一行;2. IE中不支持<img>等的居中   要注意的是:1. 使用相对高度定义你的 height 和 line-height;2. 不想毁了你的布局的话,overflow: hidden 一定要

  二、多行内容居中,且容器高度可变。也很简单,给出一致的 padding-bottom 和 padding-top 就行

  优点:1. 同时支持块级和内联极元素;2. 支持非文本内容;3. 支持所有浏览器   缺点:容器不能固定高度

css图片垂直居中,我们只需要在CSS样式中加入如下CSS代码:img{ vertical-align:middle;}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏问天丶天问

Javascript 获取div真实高度

1593
来自专栏知识分享

C#虚方法

如果说在一个类中已经使用了一个方法而且已经实现,而我想在它的子类中也想使用这个方法,而且也想实现 就像下面这种样子--但是现在还不能用 using System...

3215
来自专栏hbbliyong

WPF模板

先来个模板: <ControlTemplate x:Key="button" TargetType="Button"> <Border ...

3134
来自专栏用户画像

H5新增的嵌入多媒体元素与交互性元素

新增的嵌入多媒体元素有video和audio元素,分别用来插入视频和声音的。值得注意的是可以再开始标签和结束标签之间放置文本内容,这样旧版本的浏览器就可以显示出...

552
来自专栏张善友的专栏

ASP.NET MVC Action Filters

在看这篇Fun with Http Headers in ASP.NET MVC Action Filters的时候,提到了 Roni Schuetz在code...

1836
来自专栏一“技”之长

Java开发GUI之Label标签 原

    Label控件是awt包中最简单的几个视图控件之一,其用来显示固定的文本,示例如下:

512
来自专栏Windows Community

Extensions in UWP Community Toolkit - FrameworkElement Extensions

概述 UWP Community Toolkit Extensions 中有一个为FrameworkElement 提供的扩展 - FrameworkEleme...

3288
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(3)——操作测试对象

2826
来自专栏搞前端的李蚊子

JS实现一个v-if

703
来自专栏CDA数据分析师

【爬虫基础】网页是怎么构成的?

作者 张俊红 本文为 CDA 志愿者张俊红原创作品,转载需授权 所谓的网络爬虫就是从网页中指定位置找到对应的数据并下载,要想知道数据在什么位置,我们需要首...

2025

扫描关注云+社区