如何垂直对齐文本inline-block td？ [英] How to vertically align text in an inline-block td?

问题描述

我有一个表，一行有tds。我使他们显示：inline-block，使他们包装的页面。我似乎不能使文本内部vertical-align：middle。我该如何做到这一点？还是显示：inline-block不是要走的路？非常感谢。

I have a table with one row full of tds. I made them display: inline-block so that they would wrap with the page. I can't seem to make the text inside them vertical-align: middle. How would I accomplish this? Or is display: inline-block not the way to go? Thanks.

EDIT
以下是代码。对不起，我是最新发布的。

EDIT Here is the code. Sorry I'm new to posting.

<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。我要他们显示垂直对齐的中间。让我知道是否需要发布其他内容。

I dynamically generate tds that look like the commented one. I want them to show up vertically aligned middle. Let me know if I need to post anything else.

推荐答案

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

vertical-align: middle works both with display: table-cell in CSS / <td> in HTML and display: inline-block;.

由于您已经为您的标记使用< table> ，因此您不需要使用 display：inline-block; 。

Since you are already using <table> for your markup you don't need to use display: inline-block; anymore.

要垂直对齐< td> ，只需删除固定的 height：70px; 和显示：inline-block; 从 .disk-size-td {} 。这是一个工作小提琴。如果所有项目都有固定高度，则没有任何垂直对齐：

To vertically align your <td> simply remove your fixed height: 70px; and display: inline-block; from .disk-size-td {}. Here is a working fiddle. If all your items have a fixed height there is nothing to align vertically :)

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

这篇关于如何垂直对齐文本inline-block td？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！