为什么不会vertical-align: middle工作？但是，vertical-align: top does work.
span{
vertical-align: middle;
}
<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>Doesn't work.</span>
</div>
实际上，在这种情况下，它非常简单：将垂直对齐应用于图像。由于所有内容都在一行中，因此您实际上要对齐的是图像，而不是文本。
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
<span style="">Works.</span>
</div>
在 FF3 中测试。
现在您可以使用 Flexbox 来实现这种类型的布局。
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://via.placeholder.com/60x60">
<span style="">Works.</span>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
