如何垂直对齐内联块 td 中的文本？答案

【问题标题】：How to vertically align text in an inline-block td?如何垂直对齐内联块 td 中的文本？
【发布时间】：2014-09-05 19:29:40
【问题描述】：

我有一张桌子，里面有一排 tds。我让它们 display: inline-block 以便它们与页面一起包装。我似乎无法使它们里面的文本垂直对齐：中间。我将如何做到这一点？还是 display: inline-block 不是要走的路？谢谢。

编辑这是代码。抱歉，我是发帖新手。

<div>
    <table class="disk-size-table center">
        <tr class="disk-size-row">

            <!-- <td class="disk-size-td draggable" data-disk-size="500">
                    500 GB <!-- I want the 500GB to be vertical align middle
                 </td> -->

        </tr>
    </table>
</div>

.disk-size-table {
    border-spacing: 0;
}

.disk-size-td {
    border: 1px solid black;
    border-radius: 5px;
    width: 60px;
    height: 70px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    display: inline-block;
}

table.center {
    margin-left: auto;
    margin-right: auto;
}

我动态生成看起来像注释的 td。我希望它们显示在垂直对齐的中间。如果我需要发布其他内容，请告诉我。

【问题讨论】：

欢迎来到 StackOverflow！为了写出更好的问题并增加获得答案的机会，请在问题中包含您的相关代码。
你可以试试 text-align: center;或关注此答案stackoverflow.com/questions/9249359/…
试着解释你想要达到的目标。使用td 元素意味着您希望所有元素具有相同的高度。但是将显示类型更改为 inline-block 会导致每个单元格缩小以适应高度/宽度。没有任何附加信息，很难提出解决方案。通常带着这些问题，一贴出答案，新的需求就出来了，所以请详细说明！
我最终添加了等于高度的行高。
@SkeetsMcCoy line-height 仅在您没有多行文本时才有效。只需删除 .disk-size-td 的固定高度（请参阅下面的答案），它应该适用于多行文本。

标签： html vertical-alignment css

【解决方案1】：

这是你想要的吗：Fiddle

仅在 CSS

中进行了更改

.disk-size-td {
    .....
     display: table-cell; // Add this
 }

【讨论】：

【解决方案2】：

如果您的另一个项目不需要display: inline-block，您可以简单地更改为display: float，这将为您提供您想要的样式。如果您这样做，您应该注意一些功能差异，从对两者之间差异的解释中可以更好地理解这些差异：http://learnlayout.com/inline-block.html。

【讨论】：

浮动也不起作用。它仍然没有垂直居中。
display: float 在 CSS 中不存在，你的意思可能是 float: left / right

【解决方案3】：

如果您将 td 保留为表格单元格，则可以使用：

<style>
td { display: table-cell; border: 1px solid red; max-width: 250px; }

.content, .vcenter { display: inline-block; vertical-align: middle; }
.content { border: 1px solid green; }
.vcenter { height: 100%; width: 0; }
</style>

<table><tr>
<td>
    <div class="content">
        500 GB
    </div><div class="vcenter"></div>
</td>
<td>
    <div class="content">
        asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
    </div><div class="vcenter"></div>
</td>
</tr></table>

“vcenter” div 扩展到单元格的高度，使单元格内的线高。然后“内容” div 可以使用 vertical-align:middle 在单元格内的行上垂直对齐。

如果您将 td 更改为内联块，则在单元格上使用 vertical-align:middle 应该使单元格在行的垂直中心对齐：

<style>
td { display: inline-block; vertical-align: middle; border: 1px solid red; max-width: 250px; }

.content { border: 1px solid green; }

</style>

<table><tr>
<td>
    <div class="content">
        500 GB
    </div>
</td>
<td>
    <div class="content">
        asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
    </div>
</td>
</tr></table>

但是如果td需要走多行，那么用table就没有意义了，只用div比较方便。

【讨论】：

【解决方案4】：

vertical-align: middle 可与 CSS 中的 display: table-cell / HTML 中的 <td> 和 display: inline-block; 一起使用。

由于您已经在使用<table> 进行标记，因此您不再需要使用display: inline-block;。

要垂直对齐您的<td>，只需从.disk-size-td {} 中删除固定的height: 70px; 和display: inline-block;。这是working fiddle。如果你所有的项目都有一个固定的高度，那么就没有什么可以垂直对齐了:)

您可能还想在您的<td> 中添加一些padding: 10px 0;（或任何您想要的填充）。

【讨论】：