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

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

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

其他回答

基本上,你必须降到CSS3。

-moz-box-align: center;
-webkit-box-align: center;

在css中使用flex属性。

通过在flex中使用对齐项将文本垂直居中对齐:居中;如果要通过在flex中使用“对齐内容:中心;”将文本水平居中对齐;。

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

在css中使用表单元格。

第二部分{显示:表格;}第二部分*{显示:表格单元格;垂直对齐:中间;}<div><img src=“http://lorempixel.com/30/30/“alt=”小img“/><span>它起作用了</span></div>

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

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

您可以做的另一件事是将文本的行高度设置为<div>中图像的大小。然后将图像设置为垂直对齐:中间;

这是最简单的方法。

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