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

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


当前回答

在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>

其他回答

写下这些跨度财产

span{
    display:inline-block;
    vertical-align:middle;
}

使用显示:内联块;当您使用vertical-align属性时。这些是关联的财产

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

使用行高度:30px作为跨度,以便文本与图像对齐:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

该代码适用于IE和FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

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

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