CSS对齐不同的文本生命周期

Question

我目前正在为我的网站页面制作一个标签式布局，我遇到了在不同标签中垂直对齐文本的问题，因为其中一些跨越一行，一些跨越两行。我需要将文本放在每个标签的中间，而不是让第一行对齐文本。

到目前为止，我已尝试过Valign和Line-height，但它们并没有太大帮助。

Answer 1

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

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

valign是td个元素的HTML属性，因此它可能不适用于您的“标签”

Answer 2

使用line-height EX） 行高：20像素

Answer 3

您应该使用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示例。

Answer 4

对此有用的一点是understanding vertical align。

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

离开我的头顶，你试过了吗？ line-height:100%;？ 这可能会将行高设置为父级的高度，或者它可能会填满屏幕;不确定。