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

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


当前回答

将div更改为flex容器:

div { display: flex; }

Now there are two methods to center the alignments for all the content:

方法1:

div { align-items: center; }

DEMO


方法2:

div * { margin: auto 0; }

DEMO


尝试在img上使用不同的宽度和高度值,在跨距上尝试不同的字体大小值,您将看到它们始终保持在容器的中间。

其他回答

对于记录,对齐“命令”不应该在SPAN上工作,因为它是一个内嵌标记,而不是块级标记。对齐、边距、填充等功能在内联标记上不起作用,因为内联的目的是不中断文本流。

CSS将HTML标记分为两组:内联和块级。搜索“css block vs inline”,会出现一篇很棒的文章。。。

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(理解CSS的核心原则是它不那么烦人的关键)

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

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

你可能想要这样:

<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更改为flex容器:

div { display: flex; }

Now there are two methods to center the alignments for all the content:

方法1:

div { align-items: center; }

DEMO


方法2:

div * { margin: auto 0; }

DEMO


尝试在img上使用不同的宽度和高度值,在跨距上尝试不同的字体大小值,您将看到它们始终保持在容器的中间。

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

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