CSS：中間

Question

我嘗試垂直對齊一些文字中間垂直對齊文本（jsfiddle）

我只和文字具有高度設置（inline-block的元素）跨跨度

的HTML看起來像這樣：

<div class="parent"> 
    <span class="text">Bar</span> 
    <span class="bar"></span> 
    <span class="text">Foo</span> 
</div> 

的CSS：

.bar { 
    display: inline-block; 
    height:100px; 
    width: 100px; 
    background-color: green; 
} 

我需要將文本垂直對齊到其父項的中間。我試圖在.text上輸入vertical-align: middle，但由於某些原因，只有值top和bottom似乎有效。有什麼建議麼 ？

Answer 1

試試這個：

.parent { 
    vertical-align: middle; 
} 
.bar { 
    display: inline-block; 
    height:100px; 
    width: 100px; 
    background-color: green; 
    vertical-align: middle; 
} 
.text { 
} 

Demo

Answer 2

嘗試：

.bar { 
    vertical-align: middle; 
} 

小提琴here