how to vertically align text next to a floated image?

css css-float vertical-alignment
Mosijava picture Mosijava · May 9, 2012 · Viewed 42.6k times · Source

I want to vertically align a span after a floated image. I searched for it in stack overflow and find this post. but my image is floated.

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

I give vertical-align:middle to image and nothing change!

Thanks

Answer

sandeep picture sandeep · May 9, 2012

First remove float from it. Write like this:

<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
    <span>Doesn't work.</span>

Check this http://jsfiddle.net/ws3Uf/

Related questions

How to vertically middle-align floating elements of unknown heights?

I have a (horizontally) centered outer div containing two elements of unknown width: <div style='width:800px; margin:0 auto'> <div style='float:left'>...</div> <div style='float:right'>...</div> </…

Read More
How to vertically align floating divs to the bottom?

Because examples rule: http://jsfiddle.net/rudiedirkx/wgue7/ How do I get the bars to the bottom instead of the top? Now they're sticking to the top of the container (#bars) but I want them sticking to the bottom. As …

Read More
Vertically center content of floating div

How do I verically center the content of floating div (which height I don't know)? There is very simple HTML and CSS (see this fiddle: http://jsfiddle.net/DeH6E/1/) <div class="floating"> This should be in the …

Read More