Hi,

This time i am going to show you how to center a DIV block with CSS style.

Centering a DIV

The code you need to center only your DIV.

<div id=”center”>

some code…

</div>

CSS code for centering DIV

#center   {width:700px; margin:0 auto;}

You may change the width of the DIV to any width you want.

The “margin:0 auto;” tells the browser the following:

margin-left:auto;

margin-right:auto;

margin-top:0;

margin-bottom:0;

In case you need to add a top or bottom margin you may also break the margin into more sections and the code will look like this:

#center   {width:700px; margin:10px auto 20px auto;}

That way the margin-top will be 10px and margin bottom will be 20px.

If you are a new to CSS and do not understand the meaning of margin:0 10px 12px 15px; what each one of them indicates, just remember the following rule:

• It moves clockwise starting from the top and ending on the left (each section moves the cock 3 hours)

margin:0 10px 12px 15px; is the short code for:

margin-top:0;

margin-right:10px;

margin-bottom:12px;

margin-left:15px;

I hope you gained important information from this tutorial, check back again soon.

Be Sociable, Share!

• 

One Response to Center a DIV with CSS

cakka says: May 5, 2010 at 12:54 pm

thanks for nice tutorial