html - 垂直对齐 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 元素，垂直对齐指的是兄弟元素彼此对齐，即沿着一条线，而不是引用固定的 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>