Html 如何使文本垂直于中间对齐

---

请告诉我如何使文本发送垂直对齐中间。也请建议这些问题不会在将来出现。我可以做什么？

尝试以下操作：填充：0px 0px 4px 0px

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

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

---

无法在表外垂直对齐文本，因此有两个选项：

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

或

使父元素位置：相对；和子元素绝对值：

<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 */

我的文字
#容器{
位置：相对位置；
} 
#文本{
位置：绝对；左侧：0px；顶部：50%；
页边距顶部：10px；/*文本元素高度的一半*/
}
/*提示：要缩放属性，请使用%*/

我认为第一种选择对你来说是最简单的

祝你好运，兄弟

---

W.

如前所述，非表格单元格的任何内容都不支持垂直对齐

但是，如果您只是想将一行文本居中，则可以使用

行高

。如果将<代码>行高度< /代码>与元素的<代码>高度> /代码>相同，并删除任何填充，则文本将显示在元素的中间，就像垂直对齐一样。

因此，在您的示例中，以下方法可行（如果先删除默认样式）：

但是，如果文本换行到多行，此解决方案将不起作用，文本将突然变得非常间隔

---

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

如果您希望垂直或水平地将文本置于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>

#容器{
位置：相对位置；
宽度：200px；
高度：300px；
边框：1px实心#中交；
}   
#文本{
位置：绝对位置；
宽度：150px；
高度：50px；
顶部：50%；左侧：50%；
边缘顶部：-25px；/*1/2高度*/
左边距：-75px；/*1/2宽度*/
边框：1px实心#FF0000；
}
我的文字

这可能是

页边距顶部：-10px

（：

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