Align text next to image using css

Question

How would I align my square image next to the menu text.

I tried

vertical-align: middle

but that doesn't seem to work.

possible duplicate of [How do I vertically align text next to an image with CSS?](http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css) — Sébastien, Oct 02 '13 at 21:07

score 3 · Accepted Answer · answered Oct 02 '13 at 21:06

3

You have to add vertical-align:middle to the img itself as opposed to the li.

CSS

#cssmenu ul li img {
    vertical-align: middle;
}

Working - jsFiddle here

answered Oct 02 '13 at 21:06

Josh Crozier

233,099
56
391
304

score 2 · Answer 2 · answered Oct 02 '13 at 21:06

Just add vertical-align: middle; to the IMG tag. Works for me.

<li class='active'>
  <a href='#'>
    <img src="http://upload.wikimedia.org/wikipedia/commons/5/55/Box_square.gif" 
      style="padding:10px; vertical-align: middle;" width="24" height="24">
    <span>Menu1</span>  
  </a>
</li>

Also, the height and width attributes don't need "px" units.

Align text next to image using css

2 Answers2