Html html垂直对齐并在h2标签中对齐中心
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12025924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html vertical alignment and align center in h2 tag
提问by user1449596
Can you let me know is there any mistakes in the code below? It neither align the text in center nor in middle(vertical).
你能告诉我下面的代码有什么错误吗?它既不会在中心对齐文本,也不会在中间(垂直)对齐。
<td> <h2 style = "align:center; vertical-align:middle;">TEXT</h2></td>
采纳答案by karansolo
To center the element on the page (horizontally AND vertically) you might want to use margins. There are different ways of doing this; this is just one of them. The margins will be half the size of the container element. Example:
要使页面上的元素居中(水平和垂直),您可能需要使用边距。有不同的方法可以做到这一点;这只是其中之一。边距将是容器元素大小的一半。例子:
<td style="width:100%; height:100%;">
<h2 style="position:absolute;top: 50%; left: 50%;">TEXT</h2>
</td>
NOTE: The vertical-align property works with images, not with text which is why you need to find other solutions to center your text on a page or within an element. One way is this; margins.
注意:vertical-align 属性适用于图像,而不适用于文本,这就是为什么您需要找到其他解决方案将文本居中放置在页面或元素内。一种方法是这样;边距。
A drawbackof this approach is the fact that the center of the element is not taken to center it on the page; it is pushed to the middle from the borders of the element so to speak. This means that with larger elements the top left corner will be in the center of the page instead of the center point of the element. You can fix this by using negative margins given the size of the element. You need to know the size of the element you are centering. Example:
这种方法的一个缺点是元素的中心没有使其在页面上居中;可以这么说,它是从元素的边界推到中间的。这意味着对于较大的元素,左上角将位于页面的中心而不是元素的中心点。给定元素的大小,您可以通过使用负边距来解决此问题。您需要知道要居中的元素的大小。例子:
If the element to be centered (class .centered) is 200px by 100px, the CSSto center it from the center of the elementwould look like this:
如果要居中的元素(类 .Center )是 200 像素 x 100 像素,则将其从元素中心居中的CSS将如下所示:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: 100px;
}
回答by aefxx
The style you are looking for is actually called text-align
, not align
. Moreover, the vertical-align
style won't help you here, if what you want is to vertically align the header within its cell. Try the following:
您正在寻找的样式实际上被称为text-align
,而不是align
。此外,vertical-align
如果您想要的是在其单元格内垂直对齐标题,则该样式在这里对您无济于事。请尝试以下操作:
<td style="vertical-align: middle;">
<h2 style="text-align: center;">TEXT</h2>
</td>