Can't get vertical align to work with img tag inside of a list

Question

Pretty basic question - I can't seem to vertically align an icon inside of a list.

My css looks likes this:

#top_content img {
float: left;
}

#top_content ul {
float: right;
}

#top_content li img {
vertical-align: sub;

}

#top_content li {
list-style-type: none;
display: inline;
}

#top_content li a {
text-decoration: none;
color: #7aa807;
}

My HTML looks like this:

<div id="top_content">
<ul>
<li><img src="../img/mail_ico.png" alt="#"><a href="#"><strong>(1 New)</strong></a></li>
</ul>
</div>

Any ideas? What am I doing wrong here?

Answer 1

Expecting vertical-align to work properly :) In your case would it be possible to set mail_ico.png as a background image on the <a>? That's how I handle cases where the vertical position of an image is important in a design.

Answer 2

Try adding line-height to it:

#top_content img {
  float: left;
  line-height:20px; /* adjust accordingly */
}

Answer 3

Don't float the image. It will no longer be inline behavior, that is what is causing your problem.

Answer 4

You can give the <img> a height and then adjust its vertical alignment by adding line-height to your CSS and adjust that until you're satisfied. I recommend making the height for <img> to be the height of the actual image. This isn't a great solution but it is quick.

#mail_ico {
  float: left;
  line-height: 15px; 
}

I also recommend closing the img tag according to standards:

<img src="../img/mail_ico.png" alt="#" id="mail_ico" />

Looking at the other answers... I guess you could try replacing float: left with display: inline and see if that works.

Hope this helps.

Answer 5

float: left is basicly canceling out the effect of vertical-align. vertical-align c ontrols the alignment of an in-line element to other in-line elements on the same text line. float: left makes the img a block element, on which vertical-align has no effect.