html - 如何垂直对齐我的标签

Question

我正在尝试在我的案例中进行垂直居中对齐。

我有。

<section id='container'>
    <div id='title'> 
         <h1>Title here.</h1>
     </div>
</section>

我有我的CSS样式

#title{
display: inline-block;
width: 235px;
height: 94px;
position: relative;
text-align: center;
}

#left-lesson-title h1{
color:white;
line-height: 94px;
vertical-align: middle;
text-align: left;
font:normal 1.3em arial;
margin-left:15px
}

我似乎无法让 h1 文本垂直居中对齐。在我的例子中，h1 与顶部对齐。谁能帮我解决这个问题？谢谢。

Answer 1

#title{
    border:1px solid black;
    display: table-cell;
    width: 235px;
    height: 94px;
    vertical-align:middle;
    text-align: center;
}

http://jsfiddle.net/WC6t8/

您需要将显示设置为表格单元格，然后将垂直对齐设置为中间。

这应该在 h1 标签的父容器上。