为什么设置了vertical-align却没有任何作用？
因为 vertical-align 起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display值为table-cell的元素。
换句话说 vertical-align 属性只能作用在 display 计算值 为inline、inline-block、inline-table或 table-cell 的元素上。因此，默认情况下，、、等内联元素，、、等替换 元素，非 HTML 规范的自定义标签元素，以及单元格，都是支持 vertical-align属性的，其他块级元素则不支持。
当然，现实世界是没有这么简单的。CSS世界中，有一些 CSS属性值会在背后默默地改变元素 display 属性的计算值，从而导致 vertical-align不起作用。比方说，浮动和绝对定位会让元素块状化，因此，下面的代码组合 vertical-align 是没有理由出现的：
.example {
float:left;
vertical-align:middle; /* 没有作用*/
}
.example {
position:absolute;
vertical-align:middle; /* 没有作用*/
}
那么，像下面这种情况，为什么vertical-align 没有作用呢？
//css
.box{
height:128px;
}
.box>img{
height:96px;
vertical-align:middle;
}
//html
<div id="box">
<img src="./images/zero.jpg" alt="">
</div>
此时图片顶着.box元素的上边缘显示，根本没有垂直居中，完全没有起作用！
这种情况是因为行框盒子前面的"幽灵空白节点"高度太小，如果我们通过设置足够大的行高让"幽灵空白节点"高度足够，就会看到vertical-align:middle起作用了，CSS代码如下：
//css
.box{
height:128px;
line-height:128px;/*关键css属性*/
}
.box>img{
height:96px;
vertical-align:middle;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vertical</title>
<style>
#box{
width: 600px;
height: 300px;
line-height: 300px;
border: 1px solid red;
}
#box>img{
height: 200px;
/* vertical-align: middle; */
}
</style>
</head>
<body>
<div id="box">
<img src="./images/zero.jpg" alt="">
</div>
</body>
</html>
使用height、line-height属性并不能让img 元素垂直居中，还必须配合使用vertical-align: middle;
1142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
