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

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，你会发现它们始终保持在容器的中间。