如何将跨度与向右浮动的图像垂直对齐？答案

【问题标题】：How do I vertical-align a span with an image that is floating to the right?如何将跨度与向右浮动的图像垂直对齐？
【发布时间】：2016-07-01 03:31:49
【问题描述】：

我正在尝试做一些与图像问题旁边的对齐文本非常相似的事情：Vertically align text next to an image?

不同的是，我希望图像向右浮动，但是当我将其设为float:right; 时，解决该问题的vertical-align 似乎不再起作用了？有没有办法让 img 向右浮动并且文本仍然居中对齐？

<div style="width:100px">   
   <span style="vertical-align:middle">Doesn't work.</span>
   <img style="vertical-align:middle;width:30px;height:30px;float:right">
</div>

提前致谢！

【问题讨论】：

标签： css css-float vertical-alignment

【解决方案1】：

使行高与图像相同。

【讨论】：

【解决方案2】：

从图像中删除float: right。对于 div，放置 text-align: right。它应该可以解决问题。

<div style="width:100px; text-align: right;">   
   <span style="vertical-align:middle;">Does work.</span>
   <img style="width:30px;height:30px; vertical-align: middle;">
</div>

希望这会有所帮助。 :)

【讨论】：