Question

MDN说line-height处理内联元素。图像是内联元素。那么为什么line-height不能处理img元素呢？ Here is the jsfiddle，其中行高不会使图像居中。

Answer 1

您链接的页面显示：

在替换内联元素（如按钮或其他输入元素）时，行高不起作用。

img元素是替换内联元素，因此line-height对它们没有影响。

如果要在图像周围设置线框的线高，则需要一个额外的元素。

＆＃13;

span {
  line-height: 200px;
}
div {
  outline: solid black 1px;
}

＆＃13;

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

Answer 2

您需要在div

上使用

.container {
  width: 400px;
  height: 400px;
  border: 1px dotted black;
  line-height: 400px;
}

＆＃13;

<div class="container">
  <img src="http://findicons.com/files/icons/2229/social_media_mini/48/google.png" alt="">
</div>

＆＃13;

{{1}}

＆＃13;

为什么行高不能用于img元素？

2 个答案: