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

发布于 2024-09-30 12:41:30 字数 531 浏览 6 评论 0原文

我正在尝试做一些与图像问题旁边的对齐文本非常相似的事情：垂直对齐图像旁边的文本？

区别在于，我希望图像向右浮动，但当我使其浮动时似乎 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>

提前致谢！

原文

I'm trying to do something very similar to the aligning text next to an image question: Vertically align text next to an image?

The difference is, I want the image to float to the right, but it seems when I make it float:right;, the vertical-align that solved that problem doesn't work anymore? Is there a way to have the img float to the right AND have the text still middle aligned to it?

<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>

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼趣 2024-10-07 12:41:30

使行高与图像相同。

回复收藏 0 原文

旧夏天 2024-10-07 12:41:30

从图像中删除 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>

希望这有帮助。 :)

Remove the float: right from the image. For the div, place text-align: right. It should solve the problem.

<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>

Hope this helps. :)

回复收藏 0 原文

~没有更多了~