Absolute Positioning & Text Alignment

Question

I would like some text to be centered in the bottom of the screen.

I tried this, but it doesn't work. It looks like absolute positioning conflicts with the alignment.

How could I achieve this simple task ?

Answer 1

The div doesn't take up all the available horizontal space when absolutely positioned. Explicitly setting the width to 100% will solve the problem:

HTML

<div id="my-div">I want to be centered</div>​ 

CSS

#my-div {    position: absolute;    bottom: 15px;    text-align: center;    width: 100%; } 

​

Answer 2

Try this:

http://jsfiddle.net/HRz6X/2/

You need to add left: 0 and right: 0 (not supported by IE6). Or specify a width