tabs - CSS Valign不同的文本行跨度

Question

我目前正在为我的网站页面设计一个选项卡式布局，并且我在不同选项卡中垂直对齐文本时遇到问题，因为其中一些跨越一行，一些跨越两行。我需要将文本放置在每个选项卡的中间，而不是让文本与第一行对齐。

到目前为止，我已经尝试过 Valign 和 Line-height ，但它们并不是很有帮助。

score 0 · Accepted Answer

如果您需要垂直和水平居中的文本，请使用：

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

valign是td元素的 HTML 属性，因此它可能不适用于您的“选项卡”

score 0 · Accepted Answer

0

使用 line-height ex) line-height:20px

于 2012-08-10T15:51:57.727 回答

score 0 · Accepted Answer

您应该使用vertical-align: middle，但要意识到要应用它，您需要使用display: table-cell.

例如，如果您使用类似于以下 HTML 结构的内容：

<div class="container">
    <span>Some Text</span>
</div>

然后，您可以使用以下方法获得所需的居中：

.container {
    text-align: center;
    display:table-cell; 
    vertical-align:middle
}

这是一个JSFiddle示例。

</p>

score 0 · Accepted Answer

对此非常有帮助的阅读是理解垂直对齐。

我假设您在这里谈论每个选项卡选择器上的标签。您可以使用该页面中的一种技巧，并将标签文本放在内部容器中，使其居中。

在我的脑海中，你有没有试过：
line-height:100%;？这可能会将行高设置为父级的高度，或者它可能会填满屏幕；没有把握。

4 回答 4