CODEWITHSUNDEEP
htmlcsslayoutvertical-alignment
Thomas
Thomas

Reputation: 5099

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

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?

Upvotes: 0

Views: 913

Answers (4)

RoToRa
RoToRa

Reputation: 38441

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.

Upvotes: 1

ScottS
ScottS

Reputation: 72281

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

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382861

Try adding line-height to it:

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

Upvotes: 3

Pat
Pat

Reputation: 25685

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.

Upvotes: 2

Related Questions