Geek Answers Handbook

Vertical alignment of text in a block tag

I need css gunu to help me with this. Right, I have a tag that is a fixed width and block height. Inside is a background image and image name. I am trying to align the text to the bottom and I am not getting anywhere. I tried to make a display: table-cells; Vertical Align: Bottom; and all sorts of ways. Boo, Iā€™m not going anywhere. I know that I could do linear height, but she has this weird dashed line around the element. I just tried to have a span with text in the tag and vertical alignment, but without joy, although the underline moved to the bottom. What a strange thing! Any help is greatly appreciated. Richard

+7
html css vertical-alignment tags
source share
2 answers

The parent element needs a mapping: table, and then the element you want at the bottom has a mapping: table-cell; alignment: bottom;

+9
source share

What browsers do you target? 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 used as display:table-cell; , and vertical-align:bottom; . You need both; not sure if you tried this.

If this is not pleasant for you (are you targeting IE6?), You will need to put your <a> element in a block level element, and then put 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>
+6
source share

More articles:


All Articles