vertical-align作用的前提++图片不上下居中

Posted 2021-02-15 chengfengchi

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;
}