为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<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>
当前回答
显示带对齐项目的柔性:居中;是垂直对齐项目的最佳方式
第二部分{显示:柔性;对齐项目:居中;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>它起作用</span></div>
其他回答
基本上,你必须降到CSS3。
-moz-box-align: center;
-webkit-box-align: center;
实际上,在这种情况下非常简单:对图像应用垂直对齐。因为它都在一行中,所以它实际上是您想要对齐的图像,而不是文本。
<!-- 将“垂直对齐:中间”样式从span移动到img--><div><img style=“vertical align:middle”src=“https://via.placeholder.com/60x60“alt=”显示文本60 x 60的灰色图像“><span style=“”>有效</span></div>
在FF3中测试。
现在,您可以将flexbox用于这种类型的布局。
.box格式{显示:柔性;对齐项目:居中;}<div class=“box”><img src=“https://via.placeholder.com/60x60"><span style=“”>有效</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+
我同意,这可能令人困惑。尝试利用表格功能。我使用这个简单的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; }
请注意,您必须设置图像和表格容器的样式并调整其大小,以使其按您的需要工作。享受
使用行高度:30px作为跨度,以便文本与图像对齐:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>