如何垂直對齊div中的元素

我是一個HTML/CSS新手，並且在div中垂直對齊元素令我瘋狂。基本上，我有一個div，其中包含文本和圖像的混合，我想要做的就是垂直對齊中間的元素。如何垂直對齊div中的元素

內聯元件（且僅內聯元素）可以在它們的上下文經由垂直對齊垂直排列：中間。然而，在「上下文」不整父容器的高度，它的文本行他們所在的高度

所以，我創建了一個SPAN和事件設定diplay: inline但沒有任何工程：

<div id="main_section" class="main_align" > 
    <span class="inline"> 
     <span class="inline"><img src="http://placehold.it/50x50" /></span> 
     &nbsp; 
     <span class="small inline">A Very Small Text</span> 
     &nbsp; 
     <span class="medium inline">Medium String</span> 
    </span> 
</div>

這裏是jsfiddle。

任何指針將不勝感激。

注意：我很高興，如果這在Chrome和Firefox的作品。無需解決IE特定的問題。

來源

2013-05-10 marcoseu

從@lazyprogrammer和@ j08691答案是完美的罰款，並有至少需要的指令，但如果你也想對齊文本（而不是由他們各自的基線），然後檢查我的答案，需要使用'內聯塊「 – FelipeAls 2013-05-10 16:55:19

如果你也想對齊不同大小的文本垂直（比基線等），但不包括以下小提琴是一個可能的解決方案，使用inline-block： http://jsfiddle.net/vGKjj/13/

HTML：

<div id="main_section" class="main_align" > 
    <span> 
     <span class="vam"><img src="http://placehold.it/50x50" /></span> 
     &nbsp; 
     <span class="small vam">A Very Small Text</span> 
     &nbsp; 
     <span class="medium vam">Medium String</span> 
    </span> 
</div>

CSS：

.vam { 
    vertical-align: middle; 
} 
span.vam { 
    display: inline-block; 
} 
.vam img { 
    vertical-align: top; /* removes a white gap below image */ 
}

來源

2013-05-10 16:51:31 FelipeAls

+1不錯的和完整的解決方案 – lazyprogrammer 2013-05-10 17:01:21

你的問題可以通過添加以下代碼

.inline img{ 
    vertical-align:middle; 
}

又一個音符
也工作正常，如果你有一個固定的高度，使線的高度等於它一招解決。
例如： -

.yourDiv{ 
    height:50px; 
    line-height:50px; 
}

jsfiddle

來源

2013-05-10 16:45:50 lazyprogrammer

謝謝。任何想法，如果有什麼我可以做到讓文本在中間對齊？ – marcoseu 2013-05-10 16:51:00

請參閱編輯！以上只適用於如果你只有一條線 – lazyprogrammer 2013-05-10 16:54:01

如何垂直對齊div中的元素

回答

相關問題