如何在我的情况下垂直对齐我的标签

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/

您需要将显示设置为table-cell，然后将vertical-align设置为中间。

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