CODEWITHSUNDEEP
htmlcsstextanchor
Null
Null

Reputation: 197

Aligning text within an anchor

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.sstatic.net/YKeey.jpg

Here is how it's supposed to look: https://i.sstatic.net/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!

Upvotes: 3

Views: 10164

Answers (2)

Dominic Tancredi
Dominic Tancredi

Reputation: 42332

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.

Upvotes: 6

Paul T
Paul T

Reputation: 1475

Here is a great article by Chris Coyier explaining what is going on with this situation: http://css-tricks.com/what-is-vertical-align/

Upvotes: 0

Related Questions