Vertical Aligning some text in a block <a> tag

Question

I need a css gunu out there to help me with this one. Right I have an a tag which is a block element fixed width and height. Within it is a background image and the images title. I'm trying to align the text to the bottom and I'm getting no where. I've tried doing display:table-cell; vertical-align:bottom; and all manner of different ways. Bu getting nowhere. I know that I could do line-height but that has that weird dotted line around the element. Just tried having a span with the text in that within the a tag and vertical align that but no joy although the underline has moved to the bottom. Which is odd! Any help much appreciated. Richard

Solution 1

The parent element needs display:table and then the element you want on the bottom has display:table-cell; align:bottom;

Solution 2

What browsers are you targetting? This works fine for me in IE8.0.6 and FireFox 3.5.8:

<a style="display:block;height:200px;width:200px;background:blue;display:table-cell;vertical-align:bottom;">This is a test</a>

Note I've used both display:table-cell; and vertical-align:bottom;. You need 'em both; wasn't sure if you'd tried that.

If that's giving you trouble (are you targeting IE6?) you're going to have to place your <a> element in a block level element and then position it.

<div style="position:relative;top:0px;left:0px;height:200px;width:200px;background:yellow;">
    <a style="position:absolute;bottom:0px;">Your text</a>
</div>