1

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!

Community
  • 1
  • 1
Chris
  • 11
  • 1
  • 2

2 Answers2

1

Make the line-height the same as the image.

Rob
  • 14,746
  • 28
  • 47
  • 65
0

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. :)

Ameed Aabidi
  • 113
  • 1
  • 10