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

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/

Answer 2

MDN's docs on vertical-align州：

  

vertical-align CSS属性指定内联或表格单元格框的垂直对齐方式。

因此，您也可以将范围设置为display: inline-block，并且该属性将起作用（如果跨度已定义高度）

＆＃13;

＆＃13;

div {
  
}
img {
  
}
span {
  display: inline-block;
  vertical-align: middle;
  height: 100px;
}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果你想完全取消这些牌桌。你可以看看

display: inline-block;

在img＆amp;上使用此功能span您可以通过std css设置垂直对齐方式。

这是一个codepen示例：http://codepen.io/sixthcore/pen/pvdMyp

使用此黑客删除堆叠中的任何空白区域的快速通知是使用周围div上的font-size：0px值。这意味着您需要为span指定font-size :.

此解决方案不需要使用表。希望有所帮助。