html - 行高 :0 puts the image in vertical center of button

Question

我在其他网站上看到这段代码，当时我试图将 img 垂直居中在 button 中。

button {
  line-height: 0;
  height: 50px;
}
img {
  height: 25px;
}

<button>
  <img 
       src="https://www.materialui.co/materialIcons/action/search_24px.svg" 
       alt="search" />
</button>

没有 line-height: 0; 图像不是按钮的精确垂直中心。但是当我们放置 line-height: 0; 时，它就完美了。我在 chrome 50 中测试过。为什么会这样？

http://codepen.io/asim-coder/pen/ezmYwm

Answer 1

为什么 line-height: normal 不起作用，因为“normal”的值不仅仅是应用于所有元素的单个具体值，而是计算为“合理”值取决于元素上设置(或继承)的字体大小。 Height 和 line-height 是两个不同的东西。这就是为什么您没有得到垂直 居中 输出的原因。

和line-height: 0 将文本行的高度设置为空。清除文本的默认 line-height。

您可以使用vertical-align: middle 规则垂直对齐元素

button {
  height: 50px;
}
img {
  height: 25px;
  vertical-align: middle;
}

<button>
   <img src="https://www.materialui.co/materialIcons/action/search_24px.svg" alt="search" />
</button>