Question

I have a problem. I’m trying to get the text inside of an anchor tag to align at the bottom of the image inside of the anchor tag.

Here is how it shows now: https://i.stack.imgur.com/YKeey.jpg

Here is how it’s supposed to look: https://i.stack.imgur.com/EDq64.jpg

I’ve tried everything with the vertical-align property in CSS but it’s not working.

Any help?

Here is the request HTML and CSS code

#facebook { float: left; margin-top: 10px; margin-right: 10px; height: 22px; }

#facebook a { font-family: Gerogia; font-size: 18px; font-style: italic; color: #808080;      text-decoration: none; }

#facebook a img, #facebook a span {
vertical-align: text-bottom;
}

<div id="facebook"> <!-- Start facebook -->
<a href="#">
    <span>Like Us&nbsp;</span><img src="images/facebook.jpg" alt="Facebook" />
</a>
</div> <!-- End facebook --> 

Thanks!

Answer 1

Set the line-height of the anchor tag equal to the font-size of the “span” text. Also, vertical-align: bottom.

EDIT:

Try using “vertical-align: bottom” instead of “vertical-align: text-bottom”. Check out these options from w3schools on the “vertical-align” spec. _{(not associated with the w3c)}

EDIT:

Make the line-height of your “span” text equal to its font-size. I think the line-height is actually larger, and that’s why you’re seeing it not PERFECTLY aligned at the bottom…because the entire shape / cell of the text is the line-height and NOT the font-size. To normalize, make it equal like this (assuming you’ve kept a font-size of 18px):

#facebook a span {
    line-height: 18px;
}

A page going into some detail explaining this is here.