html垂直对齐并在h2标记中对齐中心

Question

你可以告诉我下面的代码有什么错误吗？它既不在中心也不在中间(垂直)对齐文本.

<td> <h2 style = "align:center; vertical-align:middle;">TEXT</h2></td>

Answer 1

你正在寻找的风格实际上是text-align,而不是align.此外,vertical-align如果你想要的是在它的单元格中垂直对齐标题,那么这种风格对你没有帮助.请尝试以下方法:

<td style="vertical-align: middle;">
    <h2 style="text-align: center;">TEXT</h2>
</td>

Answer 2

要使元素在页面上居中（水平和垂直），您可能需要使用边距。有不同的方法可以做到这一点；这只是其中之一。边距将为容器元素大小的一半。例子：

<td style="width:100%; height:100%;"> 
 <h2 style="position:absolute;top: 50%; left: 50%;">TEXT</h2> 
</td>

注意：垂直对齐属性适用于图像，而不适用于文本，这就是为什么您需要找到其他解决方案来将文本在页面或元素内居中。一种方法是这样；边距。

这种方法的一个缺点是元素的中心并没有被置于页面的中心。可以这么说，它被从元素的边界推到了中间。这意味着对于较大的元素，左上角将位于页面的中心而不是元素的中心点。您可以通过在给定元素大小的情况下使用负边距来解决此问题。您需要知道要居中的元素的大小。例子：

如果要居中的元素（类 .centered）为 200px x 100px，则将其从元素中心居中的CSS将如下所示：

.centered { 
 position: fixed;  
 top: 50%;  
 left: 50%;  
 margin-top: -50px;  
 margin-left: 100px;
}