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 */
}

Answer 2

您可以通过添加以下代码来解决您的问题

.inline img{
   vertical-align:middle;
 }

另一个注意事项另外一个工作正常的技巧，如果你有一个固定的高度，使线高度等于它。
例如： -

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

jsfiddle

如何垂直对齐div内的元素

2 个答案: