與CSS垂直對齊

Question

我試圖垂直對齊div標記中的內聯元素。這是我的HTML：

<div class="foo"> 
    <div id="bar"> 
     <a href="#">Link 1</a> 
    </div> 
</div>  

，這裏是我的CSS：

.foo{ 
    width:200px; 
    height:60px; 
    background-color:red; 
} 

.foo #bar{ 
    text-align:center; 
    vertical-align:middle; 
} 

如何垂直對齊這種定位的標籤？我是否已經將HTML/CSS設置爲正確的方式來有效地執行此操作？垂直對齊嵌入式和塊式元素的最佳做法是什麼？

感謝

Answer 1

用CSS

.Purest方式是使用display屬性，像這樣：

.foo { display: table; } 
#bar { 
    display: table-cell; 
    vertical-align: middle; 
} 

這是假設你的#bar有一定的描述集的高度，其內容應垂直贊同..