如何使文本垂直对齐中间

Question

http://jsfiddle.net/PZ5AZ/

请告诉我该怎么做使文本发送居中对齐。也请告诉我这些问题以后不会出现，我该怎么办？

Answer 1

如前所述，在不是表格单元格的任何内容上都不真正支持垂直对齐。

但是，如果您只是尝试将一行文本居中，则可以使用line-height 。 如果将line-height设置为与元素的height相同，并删除任何填充，则文本将显示在元素的中间，就像垂直对齐一样。

因此，在您的示例中，以下操作将起作用（如果您先删除默认样式）：

line-height:28px;
height:28px;
padding:0px;

但是，如果文本换行超过一行，则此解决方案将无法正常工作，文本会突然变得间隔很大。

对于更通用的解决方案，最好使用javascript动态计算出特定元素所需的填充。

Answer 2

您无法在表格外垂直对齐文本，因此有两种选择：

您可以使用父元素的填充来实现v对齐文本的错觉。 正如龙先生所说明的。

要么

您将父元素的位置设为：relative; 和子元素绝对值：

<div id='container'>
<div id='txt'>My Text</div>
</div>

#container{
position:relative;
} 

#txt{
position:absolute; left:0px; top:50%;
margin-top:10px; /* half the height of the text element */
}

/* hint: for scaling attributes use %'s */

我认为第一种选择是您所用的最简单的方法。

祝你好运，兄弟！

W.

Answer 3

试试这个：padding：0px 0px 4px 0px;

Answer 4

添加以下内容以清除Mozilla中的默认按钮填充：

button::-moz-focus-inner {
    border:0;
    padding-top:0;
}

Answer 5

如果您想在div内垂直或水平居中放置文本，可以尝试一下

#container{
position:relative; 
width:200px; 
height:300px; 
border:1px solid #CCCCCC;
}   
#txt{
position:absolute; 
width:150px; 
height:50px; 
top:50%; left:50%; 
margin-top:-25px; /* 1/2 of height */
margin-left:-75px;/* 1/2 of width */
border:1px solid #FF0000; 
}

<div id="container">
    <div id="txt">My Text</div>
</div>