为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<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>
当前回答
在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; }
方法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;
}