Question

我想在我的div中垂直对齐文本。

我有类似

的东西

<div id='div'>
   <h1>test here</h1>
</div>

#div{
   float: left;
   padding: 10px;
   height: 180px;
   width: 130px;
   line-height: 180px;
   text-align: center;
   vertical-align: middle;
}

#div h1{
   height: 180px;
   line-height: 180px;
   vertical-align:middle;
   font:normal 0.9em proxima-reg;
}

我似乎无法垂直对齐h1内的div标记文字。我的大脑现在被炸了，我希望有人可以帮助我。提前谢谢。

Answer 1

对于表格单元格而言，

vertical-align比“非内联”DIV元素更多。

为您的DIV设置固定的宽度和高度，然后尝试使用margin: auto 0px;垂直对齐它。

或者...

为你的DIV提供顶部和底部填充。

无论哪种方式，您都需要将文本对齐到文本中心。

Answer 2

试试这个（http://jsfiddle.net/myajouri/zyB6C/）：

#div{
   float: left;
   display: table-cell;
   padding: 10px;
   height: 180px;
   width: 130px;
   line-height: 180px;
   text-align: center;
   vertical-align: middle;
    background-color: red;
}

#div h1{
   display: inline-block;
   vertical-align: middle;
   font:normal 0.9em proxima-reg;
    background-color: green;
}

Answer 3

这是一种方法：

#div {
    float: left;
    padding: 10px;
    height: 180px;
    width: 130px;
    line-height: 180px;
    text-align: center;
    background-color: yellow;
}
#div h1 {
    vertical-align: middle;
    font:normal 0.9em proxima-reg;
    outline: 1px dotted blue;
    display: inline-block;
}

请参阅：http://jsfiddle.net/audetwebdesign/sUzK9/

您的#div具有明确定义的维度，这使事情变得更容易。

我将display: inline-block应用于h1并删除了任何高度/行高值，它似乎有效。

在我的案例中垂直对齐div中的文本

3 个答案: