如何垂直对齐div内的元素

Question

我是一个HTML/CSS新手,而div中的元素垂直对齐让我发疯.基本上,我有一个div包含文本和图像的混合,我想要做的就是垂直对齐ediv中间的元素.

根据这篇文章:

内联元素(以及仅内联元素)可以通过vertical-align:middle在其上下文中垂直对齐.但是,"上下文"不是整个父容器高度,而是它们所在文本行的高度.

所以,我创建一个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特定问题.

Answer 1

编辑2018:我现在倾向于使用Flexbox来向任何方向居中.内联块仍然很好,但Flexbox是如此强大:)

如果您还想垂直对齐不同大小的文本(除了它们的基线),那么使用以下方法可以解决以下小提琴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 */
}