html - 垂直对齐文本和没有弹性框的框

Question

所以我被迫使用旧技术并陷入困境。使用 flexbox 这不会成为问题，但如果没有它，我似乎无法正确处理。这是我想要的一个例子：

它应该是直截了当的，但是习惯了 flexbox 使我在涉及旧的对齐方式时成为了洞穴动物。这是我根据在线建议尝试过的，但框和文本仍然没有垂直对齐。有人能救我吗？（绿色边框是为了更好地显示它是否居中）

<div style="display: table; height: 30px; overflow: hidden; border:1px solid green;">
<div style="display: table-cell; vertical-align: middle;">
test <span style="display:inline-block; width:30px;height: 30px; margin: 0 5px; border: 1px solid #eee;"></span> test2
</div>
</div>

标签： htmlcss

Answer 1

添加vertical-align: middle;到<span>标签，它应该对齐。

<div style="display: table; height: 30px; overflow: hidden; border:1px solid green;">
  <div style="display: table-cell; vertical-align: middle;">
    test <span style="display:inline-block; width:30px;height: 30px; margin: 0 5px; border: 1px solid #eee;vertical-align: middle;"></span> test2
  </div>
</div>