如何将表格单元格中的文本垂直居中

Question

来自这个JSFiddle：http://jsfiddle.net/pbfsyqut/

我想要的是将包含div中图像的文本居中放在表格单元格中。

我尝试将vertical align添加到范围但不起作用：

.profile-navigation-bar-list span {
    vertical-align:center;
}

为什么垂直对齐不起作用？我该如何将文本居中？

Answer 1

由于image和span是inline-block元素，inline-block元素可以通过将vertical align添加到高度最大的元素来对齐

div {
  border: 1px solid red;
  display: inline-block;
}

div:first-child{
  vertical-align:middle;
}

<div>test<br/>test<br/>test</div>
<div>test</div>

在您的示例中，您已将vertical-align添加到第二个元素，如果第二个元素是您vertical-align工作的高度

，则该元素最小

div {
  border: 1px solid red;
  display: inline-block;
}
div:nth-child(2) {
  vertical-align: middle;
}

<div>test<br/>test<br/>test</div>
<div>test</div>

第二个元素最大

div {
  border: 1px solid red;
  display: inline-block;
}
div:nth-child(2) {
  vertical-align: middle;
}

<div>test</div>
<div>test<br/>test<br/>test</div>

Answer 2

我不确定你要求的是什么。 将div居中是非常标准的，只需在父tr中添加一个text-align:center即可。

现在，如果您只想将div居中并将图片保留在左侧，请检查jFiddle。

Answer 3

.profile-navigation-bar-list span {line-height:25px;}
img{float:left}

Answer 4

您可以将div中的所有元素设为vertical-align：middle

.profile-navigation-bar-list div > * {
    vertical-align: middle;
}

我也会删除不必要的div。