为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>
为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>
当前回答
该代码适用于IE和FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
其他回答
将div更改为flex容器:
div { display: flex; }
方法1:
div { align-items: center; }
DEMO
方法2:
div * { margin: auto 0; }
DEMO
尝试在img上使用不同的宽度和高度值,在跨距上尝试不同的字体大小值,您将看到它们始终保持在容器的中间。
在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属性时。这些是关联的财产
首先,根本不建议使用内联CSS,它确实会破坏HTML。
为了对齐图像和跨度,您可以简单地执行垂直对齐:中间。.居中对齐{垂直对齐:中间;}<div><img class=“align middle”src=“https://i.stack.imgur.com/ymxaR.png"><span class=“align-midle”>我在图像中间!感谢CSS!万岁</span></div>
因为您必须将行高度设置为div的高度,这样才能工作