html - 在我的例子中，垂直对齐 div 中的文本

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;
}

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

Answer 1

这是一种实现方式:

#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 并删除了所有高度/行高值，它似乎有效。