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

时间:2012-08-19 10:49:12

标签: html

您能否告诉我以下代码是否有任何错误?它既不会将文本对齐在中间也不会在中间(垂直)。

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

2 个答案:

答案 0 :(得分:14)

您要查找的样式实际上称为text-align,而不是align。此外,vertical-align样式在这里没有帮助,如果您想要的是在其单元格中垂直对齐标题。请尝试以下方法:

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

答案 1 :(得分:3)

要使页面上的元素居中(水平和垂直),您可能需要使用边距。有不同的方法可以做到这一点;这只是其中之一。边距将是容器元素大小的一半。例如:

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

注意:vertical-align属性适用于图像,而不适用于文本,这就是为什么您需要找到其他解决方案来将文本置于页面或元素中心的原因。一种方法是这样的;利润率。

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

如果要居中的元素(类.centered)是200px乘100px,那么 CSS 将其从元素的中心居中显示如下:< / p>

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