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

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


当前回答

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

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

其他回答

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

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

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

可以使用display属性将图像设置为内联元素

<div><img style=“vertical align:middle;display:inline;”src=“https://placehold.it/60x60"><span style=“vertical align:middle;display:inline;”>有效</span></div>

例如,在jQuerymobile中的一个按钮上,您可以通过将此样式应用于图像来对其进行一些调整:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

我同意,这可能令人困惑。尝试利用表格功能。我使用这个简单的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; }

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