Thursday, February 16, 2012

How to center a DIV

I have on so many occasions come across the question "How do I center a DIV?" Centering a DIV is an issue that's very common with Web design/development newbies.
Today I'm going to show you one of the best things to do to avoid this problem."
Here's what to do:
At the top of your CSS document and immediately after the line below

 @charset "utf-8"; /* CSS Document */ 

Type the line of code below 

 * { margin: 0 auto; } 

 If you did it correctly, you'll have something like this

 @charset "utf-8"; /* CSS Document */ 
 * { margin: 0 auto;

Or 

 @charset "utf-8"; /* CSS Document */ 
* { margin: 0 auto; } 

Doing the above, will automatically center all DIVs in your HTML document, except if you intentionally float them left, right, or if you give it an absolute positioning. This method is used when the CSS document is external

Note: 
If you'd like to use it internally, all you have to do is go to your HTML document and add the highlighted code below before the </head> Tag.

<style type="text/css">
<!--
* {
    margin: 0 auto;
}

-->
</style>



It is as simple as that.
Hopefully this will be helpful to you. Thanks.

No comments:

Post a Comment