CSS中垂直居中的方法
昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法。
- line-height
line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将div2设置行高line-height和height的值相同即可,也可以不用设置高度,因为单行文本的行高会撑开高度,其实二者就是一样的值。
但是这种方法有个不足之处,那就是如果文字内容的长度大于块的宽度时,就有一部分内容脱离了块,因为就不再是单行文本了,所以此方法只适用于单行文本。
还有一个方法就是,如果不设置元素height的情况下,那么本身就是元素包裹着内容,这时候只要将padding-top与padding-bottom设置为相同的值,同样是垂直居中的效果,而且这种方法对多行文本等都通用。
- vertical-align:middle
通过设置vertical-align:middle也可以实现垂直居中,但它有以下几种情况:
如下图,div2中同时又inline和inline-block元素,我们没有给div2设置高度时,它的高度由图片的高度撑开,而且图片和文本显示在一行,但我们发现图片下方有空隙,这是因为inline-block自带vertical-align属性,而且是默认值baseline。现在我们把vertical-align设置为middle,就会呈现出垂直居中的效果。(vertical-align属性只对拥有valign特性的html元素起作用,例如表格元素中的<td><th>等等,而像<div><span>这样的元素是不行的。)
但是当我们给div2设置了高度之后,vertical-align:middle就不起作用了。要加上inline-height之后才可以。
当容器里只有文字没有图片时,还可以利用 display 和 vertical-align 对容器里的文字实现垂直居中。通过将父元素的display设置为table-cell,并设置vertical-align:middle,可使其子元素均实现垂直居中,这和表格里单元格的垂直居中是类似的。
- 新增一个基准元素
在div2之前新增一个基准元素,设置它的高度等于父元素高度一半,之后再给要垂直居中的元素设置margin-top的值的大小是负的它自身高度,在设置line-height,则实现了垂直居中。
- 绝对定位实现垂直居中
因为绝对定位元素具有伸缩性,所以如果我们将绝对定位元素的width设置为auto时,同时把left与right设置为0,那么元素就会将其相对的父元素水平填充满。这时如果我们把高度设置为固定值,margin为auto的前提下,只要 top和 bottom 的值相等(或都为0),且不超过其相对元素减去该绝对定位元素height 的一半,就可以实现垂直居中了。
最新文章
- LeetCode ";473. Matchsticks to Square";
- python file 文件读写
- php--validate表单验证实例
- 利用mysql-proxy 代理无法迁移数据库
- 虚函数(virtual)为啥不能是static
- sql常识-INNER JOIN
- MVC知识总结(前序)
- 第23篇 js快速学习知识
- {网络编程}和{多线程}应用:基于UDP协议【实现多发送方发送数据到同一个接收者】--练习
- gcc &; gdb &; make 定义与区别
- 多线程使用Lock实现生产者实现者代码
- 谈一谈CloudBlog的系统架构
- ZOJ 3876 JAVA
- laravel之知识点
- DirectX11 With Windows SDK--16 流输出阶段
- IE8 兼容性总结
- 安卓开发----TextView控件属性列表(转)
- Android-Java-面向对象与面向过程的简单理解
- 字符串按首字母分组并ToDictionary的实现
- Origin绘制双Y轴图的方法
热门文章
- android代码混淆笔记
- [Shell]crontab 运行任务调用shell脚本,相对路径无法找到
- python的unittest測试框架的扩展浅谈
- UI性能优化
- time模块整理
- Asynchronous MQTT client library for C (MQTT异步客户端C语言库-paho)
- Ignite与Spark集成时,ClassNotFoundException问题解决
- 《程序设计语言&mdash;&mdash;实践之路【PDF】下载
- Libevent源码分析 (1) hello-world
- hbase rest api接口链接管理【golang语言版】