4

我是一个 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 特定问题。

4

2 回答 2

6

编辑 2018：我现在经常使用Flexbox来在任何方向上居中。inline-block 仍然很好，但 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 */
}
于 2013-05-10T16:51:31.760 回答
1

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

.inline img{
   vertical-align:middle;
 }

只是另一个注意事项
还有一个很好的技巧，如果你有一个固定的高度，让行高等于它。
例如：- 

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

jsfiddle

于 2013-05-10T16:45:50.073 回答