多行,单行文字垂直居中,图片垂直居中,图文垂直居中
1.单行文字垂直居中,图片垂直居中:
(1)用简单的一行代码即可实现单行文字垂直居中:设置 line-height 的值 等于高度的值。代码如下:
.div { height: 500px; line-height :500px; }
(2)图片垂直居中:设置line-height 的值等于高度值之后,再设置图片vertical-align:middle。代码如下:
.div { height: 500px; line-height :500px; }
.div img { vertical-align: middle; }
(3)图片与文字垂直居中,代码与图片垂直居中一样,
.div { height: 500px; line-height :500px; }
.div img { vertical-align: middle; }
html代码:
<li> <img src="img/58pic_53e07d958ee5c.gif" /> 实现文字与图片一行垂直居中 </li>
2.以下是一个通用的方法,可以实现单行,多行,文字垂直居中,还可以实现单张图片,图片与文字说明等。(兼容IE8及以上)
利用这个 display: table-cell; vertical-align: middle; 如果是图片img 再加上
vertical-align: middle;
原理很简单,display: table-cell 把它变成表格单元,表格单元默认就是把文字垂直居中。注意:这种方法会使设置的margin,padding无效。
html部分代码如下:
CSS部分代码如下: