html - 如何使表格单元格中的文本垂直居中

Question

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

我想要的是将包含图像的文本置于表格单元格中 div 内的中心位置。

我尝试将 vertical align 添加到 span，但它不起作用:

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