Center Align Div – Multi Browser Compatible

posted on 20th January 2010

To center a div is a very simple process and requires very little code in your CSS document. This is more as a resource for those who are new to Web Design or for people who generally forget that certain something when they come round to building websites.

So here it goes:

CSS Document

#sample-div {
margin:0 auto;
width:960px;
}

HTML

<div id="sample-div">
   <p>This div is centered!</p>
</div>

Some things for you to be aware of, if you are using the float css attribute, the above method will not work when trying to center a div. The best way to perform this task would be to wrap the div you plan on floating inside a container div that is centered. Below is an example of how this would be acheived:

CSS Document

#container-div {
margin:0 auto;
width:960px;
}

#floated-div {
float:left;
display:inline;
width:400px;
}

HTML

<div id="container-div">
   <div id="floated-div">
      <p>Floated div text goes here</p>
   </div>
</div>

• 
• 
• 
• 
• 
•