为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<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技巧将情态动词放在网页的中心。它具有大型浏览器支持:
<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; }
请注意,您必须设置图像和表格容器的样式并调整其大小,以使其按您的需要工作。享受
其他回答
您可以做的另一件事是将文本的行高度设置为<div>中图像的大小。然后将图像设置为垂直对齐:中间;
这是最简单的方法。
可以使用display属性将图像设置为内联元素
<div><img style=“vertical align:middle;display:inline;”src=“https://placehold.it/60x60"><span style=“vertical align:middle;display:inline;”>有效</span></div>
多线解决方案:
http://jsfiddle.net/zH58L/6/
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
适用于所有浏览器和ie9+
写下这些跨度财产
span{
display:inline-block;
vertical-align:middle;
}
使用显示:内联块;当您使用vertical-align属性时。这些是关联的财产
基本上,你必须降到CSS3。
-moz-box-align: center;
-webkit-box-align: center;