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

【问题标题】：How to vertically center the text in table cell如何将表格单元格中的文本垂直居中
【发布时间】：2015-02-25 11:46:33
【问题描述】：

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

我尝试将vertical align 添加到跨度，但它不起作用：

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

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

【问题讨论】：

嗯，首先是vertical-align:middle。你的意思可能是text-aling:center。
应该是图片jsfiddle.net/pbfsyqut/2
@VitorinoFernandes thx 但是如何垂直对齐图像也对齐文本？
@Vucko 不是 vitorino 做了什么
@Rod_Algonquin 你误解了我的意思。你输入了vertical-align:center;，这是错误的（没有center）-我说你需要使用vertical-align:middle，你可能用text-aling:center替换。

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

你可以让div里面的所有元素都垂直对齐：中间

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

我也会删除不必要的 div。

【讨论】：