2013-12-13 54 views
0

我想在我的情況下做一個垂直對齊中間。如何垂直對齊我的標記

我有。

<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與頂部對齊。任何人都可以幫助我嗎?謝謝。

回答

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

http://jsfiddle.net/WC6t8/

您需要將顯示器設置爲表單元格,然後設置爲中間的垂直對齊。

這應該在h1標記的父容器上。

+0

但我需要顯示內嵌塊以適應我的需求。 – FlyingCat

+0

假設您已經知道容器的大小(我將邊框添加爲可視化),請嘗試此操作以查看它是否適用於您所需的內聯塊解決方案:http://jsfiddle.net/WC6t8/1 / –