html - 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>

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

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

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

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