为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。

跨度{垂直对齐:中间;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>


当前回答

您必须对两个元素应用垂直对齐:中间对齐,以使其完全居中。

<div><img style=“vertical align:middle”src=“http://lorempixel.com/60/60/">完美居中</span></div>

被接受的答案确实将图标置于旁边文本x高度的一半左右(如CSS规范中所定义)。这可能足够好,但如果文本在顶部或底部有上升部分或下降部分,则可能看起来有点偏离:

左侧的文本未对齐,右侧的文本如上图所示。在这篇关于垂直对齐的文章中可以找到一个实时演示。

有人讨论过为什么垂直对齐:顶部在场景中起作用吗?问题中的图像可能比文本高,因此定义了线框的顶部边缘。垂直对齐:在span元素的顶部,然后将其放置在线框的顶部。

垂直对齐:中间和顶部之间行为的主要区别在于,第一个相对于框的基线移动元素(将其放置在需要实现所有垂直对齐的位置,因此感觉相当不可预测),第二个相对于线框的外部边界移动元素(更为有形)。

其他回答

第二部分{显示:柔性;对齐项目:居中;}<div><img src=“http://lorempixel.com/30/30/“alt=”小img“/><span>它起作用了</span></div>

background:url(../images/red_bullet.jpg) left 3px no-repeat;

我通常用3px代替top。通过增加/减少该值,可以将图像更改为所需的高度。

实际上,在这种情况下非常简单:对图像应用垂直对齐。因为它都在一行中,所以它实际上是您想要对齐的图像,而不是文本。

<!-- 将“垂直对齐:中间”样式从span移动到img--><div><img style=“vertical align:middle”src=“https://via.placeholder.com/60x60“alt=”显示文本60 x 60的灰色图像“><span style=“”>有效</span></div>

在FF3中测试。

现在,您可以将flexbox用于这种类型的布局。

.box格式{显示:柔性;对齐项目:居中;}<div class=“box”><img src=“https://via.placeholder.com/60x60"><span style=“”>有效</span></div>

多线解决方案:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

适用于所有浏览器和ie9+

你可能想要这样:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

正如其他人所建议的,尝试在图像上垂直对齐:

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS并不烦人。你只是没有阅读文档;P