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

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


当前回答

首先,根本不建议使用内联CSS,它确实会破坏HTML。

为了对齐图像和跨度,您可以简单地执行垂直对齐:中间。.居中对齐{垂直对齐:中间;}<div><img class=“align middle”src=“https://i.stack.imgur.com/ymxaR.png"><span class=“align-midle”>我在图像中间!感谢CSS!万岁</span></div>

其他回答

我同意,这可能令人困惑。尝试利用表格功能。我使用这个简单的CSS技巧将情态动词放在网页的中心。它具有大型浏览器支持:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

和CSS部分:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

请注意,您必须设置图像和表格容器的样式并调整其大小,以使其按您的需要工作。享受

因为您必须将行高度设置为div的高度,这样才能工作

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

<!-- 将“垂直对齐:中间”样式从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>

你可能想要这样:

<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

显示带对齐项目的柔性:居中;是垂直对齐项目的最佳方式

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