Center a div in CSS

Viewed 40328
10 Answers

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.

text-align should not be used to center a block element. (except in IE6, but this is a bug)

You have to fix the width of the block, then use margin: 0 auto;

#block
{
   width: 200px;
   border: 1px solid red;
   margin: 0 auto;
}

and

<div id="#block">Some text... Lorem ipsum</div>

One way :

<div align="center">you content</div>

Better way:

<div id="myDiv">you content</div>

CSS for myDIV:

#myDiv{
margin:0px auto;
}

i always use

<div align="center">Some contents......</div>

Try adding this to the style.

margin-left: auto;

Try this:

#bottombox {
background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0;
float:none;
height:137px;
margin:0 auto;
padding-top:14px;
width:296px;
}

That should center the div in your footer.

Create a table with single row and three columns, set left and right width to 100% and voila, the middle one gets centered automatically

Related