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

Try adding line-height to it:

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