Question

我遇到了让我很困惑的事情：

.container{
  height: 200px;
}

img{
  height: 100px;
  width: auto;
  vertical-align: middle;
}

.content{
  height: 50px;
}

<div class="container">
    <img src="https://www.dierendokters.com/images/stories/dierfoto/kitten%20kijkt%20omhog.jpg">
    <span class="content">content</span>
</div>

根据我读到的内容vertical-align用于对齐（非内联）父容器中的内联元素。

但是，如果我将vertical-align:middle;放在img上，为什么文本位于<img>的中间？为什么<img>在<div>的中间垂直对齐？

Answer 1

图像占据线的整个高度。无论您在vertical-align上使用什么值，它都不会移动。

这是因为图像的自然高度高于容器的高度。

image height: 216px vs. container height: 200px

但是，更改图像上的值会强制基线移动。

默认值vertical-align是基线。

所以，实际发生的是文本元素 - 设置为基线对齐 - 在线框的高度内垂直移动。

如果要移动文本，请在文本上使用vertical-align。

.container {
  height: 200px;
}

.content {
  vertical-align: bottom;
}

<div class="container">
  <img src="https://www.dierendokters.com/images/stories/dierfoto/kitten%20kijkt%20omhog.jpg">
  <span class="content">content</span>
</div>

Answer 2

您阅读的内容适用于.container{ background: #ddd; } img{ height: 100px; width: auto; display: inline-block; vertical-align: middle; } .content{ height: 50px; display: inline-block; }个元素，垂直对齐是指兄弟元素彼此对齐，即沿着一条线，而不是参考具有固定高度的块父元素。

<div class="container">
    <img src="https://www.dierendokters.com/images/stories/dierfoto/kitten%20kijkt%20omhog.jpg">
    <span class="content">content</span>
</div>

{{1}}

vertical-align img奇怪的行为

2 个答案: