垂直對齊inline-block的元素

我在想，我可以做這樣的：垂直對齊inline-block的元素

<div style='height:100px;vertical-align:middle;border:1px solid red;'> 
    <div style='display:inline-block;'>hi there</div> 
    <div style='display:inline-block;'>hi there</div> 
    </div>

和裏面的div會得到中間垂直對齊，但由於某種原因，這並不工作，的只有這樣，我實現了這個ATM是這樣做的（使用的line-height =身高）：

<div style='height:100px;border:1px solid red;line-height:100px;'> 
    <div style='display:inline-block;'>hi there</div> 
    <div style='display:inline-block;'>hi there</div> 
    </div>

什麼是這樣做的正確方法？

來源

2012-06-11 Omu

的可能重複[CSS - 垂直對齊DIV內容]（http://stackoverflow.com/questions/1881245/css-vertical-align-div-content） – j08691

這是一個很好的方法來做到這一點。您也可以將display: table-cell添加到父div，在這種情況下，vertical-align：middle將起作用 - >http://tinkerbin.com/mxle0LH4。不幸的是，寬度被切掉了。最好的方法是，使用行高。但其設置的父元素，而不是單獨給孩子 - >http://tinkerbin.com/ssvg8yPX

來源

2012-06-11 19:49:36 banzomaikaka

tinkerbin處於脫機狀態，它沒有存檔在archive.org上，你能否提供你的答案？ – flob

我用這個

.inner { 
    display:  inline-block; 
    padding-top: 40px; 
    padding-bottom: 40px; 
} 
 
<div style="border:1px solid red;"> 
    <div class="inner">hi there</div> 
    <div class="inner">hi there</div> 
</div>

來源

2012-06-11 19:50:01

垂直對齊inline-block的元素

回答

相關問題