Center a div in CSS

Luuk picture Luuk · Feb 17, 2010 · Viewed 26.1k times · Source

I'm trying to center the newsslider (in the div bottom-container) on this page:

http://www.luukratief-design.nl/dump/parallax/index.html

I already have text-align: center;

Still it does not work.

Any suggestions?

Answer

BalusC picture BalusC · Feb 17, 2010

The text-align: center; only centers the element's inline contents, not the element itself.

If it is a block element (a div is), you need to set margin: 0 auto;, else if it is an inline element, you need to set the text-align: center; on its parent element instead.

The margin: 0 auto; will set top and bottom margin to 0 and left and right margin to auto (of the same size) so that it automagically puts itself in the center. This only works if the block element in question has a known width (either fixed or relative), else it cannot figure where to start and end.