Question

请告诉我如何做文本发送垂直对齐中间。还请告知以后这些问题不会发生我该怎么办？

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

试试这个：填充：0px 0px 4px 0px;

Answer 4

添加此项以清除Mozilla中的默认按钮填充：

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

Answer 5

如果您希望将文本垂直居中并且可能水平居中，则可以尝试使用

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

如何使文本垂直对齐中间

5 个答案: