垂直對齊內嵌塊旁邊的更高的內嵌塊

我想垂直對齊圖像.b，使其位於文本的中心（垂直）。垂直對齊內嵌塊旁邊的更高的內嵌塊

我想我理解垂直對齊，它並不能幫助我，因爲它根據.b的基線對齊，它靠近#container的底部。

這樣做的正確做法是什麼？我想避免從頂端設置保證金。我基本上想根據父容器高度對齊，而不是基線，是否有可能/對嗎？

codepen： http://codepen.io/Vall3y/pen/vEONaJ

HTML：

<div id='container'> 
    <div class="a"></div> 
    <div class="b"> 
    text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </div> 
</div>

CSS：

#container { 
    width: 100px; 
    font-size: 0; 
} 

#container > div { 
    display: inline-block; 
} 

.a { 
    width: 30px; 
    height: 30px; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    display: inline-block; 
    position: relative; 
    background-image: url(http://upload.wikimedia.org/wikipedia/en/f/f4/Free_Blue_Star.jpg) 
} 

.b { 
    width: 70px; 
    font-size: 14px; 
}

來源

2014-11-24 Vall3y

可能重複（與包裝物下方的動態內容和內容）]（http://stackoverflow.com/questions/7301334/vertically-center-two-divs-inside-a-wrapper-with-dynamic-content-and-content-be） – AntoineB 2014-11-24 15:28:49

只要把vertical-align: middle;雙方.A和.B，這將正常工作。

你當然可以只給.ba填充和背景圖像與left center背景位置，同時除去包裝內的[垂直居中兩個div的。一個

來源

2014-11-24 15:30:12 DoXicK

謝謝。這回答這 – Vall3y 2014-11-24 15:32:19

所以標記爲答案然後;-) – DoXicK 2014-11-24 15:32:37

對不起，你只能在一定時間後標記 – Vall3y 2014-11-24 16:20:39

垂直對齊內嵌塊旁邊的更高的內嵌塊

回答

相關問題