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

这是你想要的：Fiddle

仅在 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＆＃39;作为表格单元格，则可以使用：

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

＆＃34; vcenter＆＃34; div扩展到单元格的高度，使得单元格中的行高。那么＆＃34;内容＆＃34; 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适用于HTML中的{/ 1}} {/ 1}}和display: table-cell。

由于您已经使用<td>作为标记，因此不再需要使用display: inline-block;。

要垂直对齐<table>，只需从display: inline-block;移除固定的<td>和height: 70px;即可。这是一个working fiddle。如果您的所有物品都有固定的高度，则无法垂直对齐：）

您可能还需要向display: inline-block;添加一些.disk-size-td {}（或任何填充）。

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

4 个答案: