vertical-align作用的前提++图片不上下居中
5.3.2 vertical-align
作用的前提
很多人,尤其CSS新手,会问这么一个问题:“为什么我设置了vertical-align
却没任何作用?”
因为vertical-align
起作用是有前提条件的,这个前提条件就是:只能应用于内联元素以及display
值为table-cell
的元素。
换句话说,vertical-align
属性只能作用在display
计算值为inline
、inline- block
,inline-table
或table-cell
的元素上。因此,默认情况下,<span>
、< strong>
、<em>
等内联元素,<img>
、<button>
、<input>
等替换元素,非HTML规范的自定义标签元素,以及<td>
单元格,都是支持vertical-align
属性的,其他块级元素则不支持。
当然,现实世界是没有这么简单的。CSS世界中,有一些CSS属性值会在背后默默地改变元素display
属性的计算值,从而导致vertical-align
不起作用。比方说,浮动和绝对定位会让元素块状化,因此,下面的代码组合vertical-align
是没有理由出现的:
.example {
float: left;
vertical-align: middle; /* 没有作用 */
}
.example {
position: absolute;
vertical-align: middle; /* 没有作用 */
}
.box {
height: 128px;
}
.box > img {
height: 96px;
vertical-align: middle;
}
<div class="box">
<img src="1.jpg">
</div>
此时图片顶着.box
元素的上边缘显示,根本没垂直居中,完全没起作用!
这种情况看上去是vertical-align:middle
没起作用,实际上,vertical-align
是在努力地渲染的,只是行框盒子前面的“幽灵空白节点”高度太小,如果我们通过设置一个足够大的行高让“幽灵空白节点”高度足够,就会看到vertical-align:middle
起作用了, CSS代码如下:
.box {
height: 128px;
line-height: 128px; /* 关键CSS属性 */
}
.box > img {
height: 96px;
vertical-align: middle;
}