这种图片垂直居中对齐是什么原理？
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/bai...; style="display: inline-block; vertical-align: middle;" />
</div>
</body>
</html>
1、在父元素上设置行高（一般不应该都是设置子元素行高等于父元素高吗，图片可能没有行高所以无效？）
2、img中设置vertical：middle！在w3c的说明中如下图
上面写按照该元素所在行的基线垂直对齐，下面又说把次元素放置在父元素的中部！（单独在img上写vertical-align不能垂直居中）
我已经迷茫了！所以这个line-height和vertical-align到底是怎么用！
ps、其它的什么display：table；和绝对定位之类的不用和我说了。我知道！我只想知道上面这代码怎么解释~
慕桂英3389331浏览 906回答 0
0回答
随时随地看视频慕课网APP
相关分类
Html5
![https://www.baidu.com/img/bai...](https://www.baidu.com/img/baidu_jgylogo3.gif"){kind=link}