不带柔性盒的文本和框垂直对齐

Question

所以我被迫用旧技术工作却被困住了。有了柔性盒，这不会是一个问题，但我似乎不能正确的没有它。下面是我想要的一个例子：

​

​

它应该是直截了当的，但习惯柔韧性使我成为洞穴动物，当涉及到古老的方式对齐。以下是我在网上建议的基础上所做的尝试，但是框和文本仍然没有垂直排列。有人能救我吗？(绿色边框是为了更好地显示它的中心位置)

<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>

​

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>

​