如何在嵌入式块td中垂直对齐文本？

Question

我有一张桌子，上面满是tds。 我让它们显示：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;
}

我动态生成看起来像已注释过的tds。 我希望它们出现在垂直对齐的中间。 让我知道是否需要发布其他内容。

Answer 1

这是您想要的： 小提琴

CSS中只有所做的更改

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

Answer 2

如果具有display: inline-block并不是您的另一部分项目的要求，则可以简单地更改为display: float ，它将为您提供所需的样式。 如果执行此操作，则应注意一些功能上的区别，可以从以下两者之间的区别解释中更好地理解它们： http : //learnlayout.com/inline-block.html 。

Answer 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需要多行，那么使用表就没有意义了，仅使用div更容易。

Answer 4

vertical-align: middle适用于display: table-cell CSS中的display: table-cell / HTML中的<td>和display: inline-block; 。

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

要垂直对齐<td>只需删除固定height: 70px; 并display: inline-block; 来自.disk-size-td {} 。 这是工作中的小提琴 。 如果所有物品的高度都固定，则没有东西可以垂直对齐：)

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