MDN说line-height
处理内联元素。图像是内联元素。那么为什么line-height
不能处理img元素呢? Here is the jsfiddle,其中行高不会使图像居中。
答案 0 :(得分:6)
您链接的页面显示:
在替换内联元素(如按钮或其他输入元素)时,行高不起作用。
img
元素是替换内联元素,因此line-height
对它们没有影响。
如果要在图像周围设置线框的线高,则需要一个额外的元素。
span {
line-height: 200px;
}
div {
outline: solid black 1px;
}

<div>
Hello <span> <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt=""> </span> World
</div>
<div>
Hello
<img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt="">World
</div>
&#13;
答案 1 :(得分:2)
您需要在div
.container {
width: 400px;
height: 400px;
border: 1px dotted black;
line-height: 400px;
}
<div class="container">
<img src="http://findicons.com/files/icons/2229/social_media_mini/48/google.png" alt="">
</div>
&#13;
{{1}}&#13;