垂直对齐的 IMG 怪异行为

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

您阅读的内容适用于inline-block元素，垂直对齐是指同级元素彼此对齐，即沿一条线，而不是引用具有固定高度的块父元素。

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

Answer 2

图像占据

线条的整个高度。无论您在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>