CODEWITHSUNDEEP
htmlcss
user1938745
user1938745

Reputation: 193

Align text next to image using css

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

Fiddle

I tried

vertical-align: middle

but that doesn't seem to work.

Upvotes: 2

Views: 4477

Answers (2)

Larsenal
Larsenal

Reputation: 51146

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.

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240868

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

Upvotes: 3

Related Questions