以下内容我有以下结构：如何垂直对齐，而无需使用表格单元格
div {
display: table;
}
img {
display: table-cell;
}
span {
display: table-cell;
vertical-align: middle;
}<div>
<img src="http://placehold.it/200x100" /> <span>Test</span>
</div>这似乎工作，但我想知道是否有不使用表替代。如果我不使用表格，只是使用：
span {vertical-align: middle;}
它不起作用！
我很感激任何帮助。
垂直对齐图像和跨度。
HTML
<div>
<img src="http://placehold.it/200x100" /> <span>Test</span>
</div>
CSS
img,
span {
vertical-align:middle;
}
MDN's docs on vertical-align状态：
vertical-align CSS属性指定内联或表格单元格框的垂直对齐。
所以，或者你可以设置跨度为display: inline-block，并且属性就可以了（如果跨度具有已定义的高度）
div {
}
img {
}
span {
display: inline-block;
vertical-align: middle;
height: 100px;
}<div>
<img src="http://placehold.it/200x100" /> <span>Test</span>
</div>如果你想完全废除表格。您可以检查出
display: inline-block;
通过这种对img & span你可以通过设置CSS性病垂直对齐。
这里是一个codepen例如：http://codepen.io/sixthcore/pen/pvdMyp
快速通知以除去使用这种黑客在堆叠的任何空白是要使用的字体大小：0像素值对周围的div。这确实意味着您需要指定字体大小：对于跨度。
该解决方案不需要使用表格。希望有所帮助。
非常感谢，它终于奏效了。我会尽快接受它。 – Vagtepes 2015-02-09 20:15:32
注意这将使图像与线框居中。但span仍然会有'vertical-align：baseline'，所以文本不会以行框为中心。要将图像与文本居中，“span”也需要“vertical-align：middle”。 – Oriol 2015-02-09 20:17:50
感谢您的澄清，我会更新我的答案！ @Oriol – chrisbedoya 2015-02-09 20:19:22