垂直对齐图像旁边的文字？

Question

垂直对齐图像旁边的文字？

为什么不行vertical-align: middle？然而，vertical-align: top 确实有效。

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span></div>

Answer 1

将您更改div为Flex容器：div {display:flex;}现在有两种方法可以使所有内容的对齐居中：方法1：div {align-items:center;}DEMO方法2：div * {margin-top:auto; margin-bottom:auto;}DEMO尝试不同的宽度和高度值img和不同的字体大小值span，你会发现它们始终保持在容器的中间。