Question

我希望我的文字SUN，MON显示vertical-align:middle;但仍然没有运气。目前文本位于左上角。我的编码有什么问题？我怎么能纠正这个？

<td colspan="2">
    <span id="selectable">
        <span style="width:35px;height:35px;display:inline-block;" class="ui-widget-content">SUN</span>
        <span style="width:35px;height:35px;display:inline-block;" class="ui-widget-content">MON</span>
    </span>
</td>

感谢您的帮助。

Answer 1

要在<span>内垂直对齐文字，您需要设置line-height而不是height：

line-height: 35px;

vertical-align:middle;适用于table-cell元素内的文字。它还会影响inline-block元素的垂直定位，但不会影响文本节点。

你可以在这里找到一个很好的解释：http://phrogz.net/css/vertical-align/

以及更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Answer 2

为了完整起见，如果您的文字包含在两行上，line-height不起作用，请改用<td>元素：

vertical-align:middle; text-align:center;

在跨度中显示文本中间

2 个答案: