html - 如何在不使用表格单元格的情况下垂直对齐以下内容

Question

我有以下结构:

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

这是行不通的!

感谢任何帮助。

Answer 1

垂直对齐图像和跨度。

HTML

<div>
  <img src="http://placehold.it/200x100" /> <span>Test</span>
</div>

CSS

img,
span {
    vertical-align:middle;
}

http://jsfiddle.net/dc2jn8vk/