How to Align a DIV Center

DIV tags let you add graphic elements to HTML or CSS code. These tags take simple text-based websites to new heights, adding pictures, clickable previews to other pages, graphic text elements and embedded video. DIVs are analogous to movable blocks of code, capable of resting on top of or behind existing HTML. By default, DIV tags are often aligned to the left-hand side of the screen. A fixed DIV tag can be centered, but only if you use the right code.

Instructions

1. Access your web page's HTML or CSS style sheet. Every editor provides different access methods, but in many you just need to click on "Source" or "Code" somewhere on the main dashboard.

2. Locate the DIV code you want to center in your CSS style sheet. DIV tags start with the text "<style>" and end with "</style>."

3. Insert the following code within the brackets containing the DIV's width: "margin-left: auto; margin-right; auto." For a 200-pixel DIV, the example code is as follows: "div#main {width: 200px; margin-left: auto; margin-right: auto}."

4. Save your changes and exit. The DIV is now automatically centered when you view your finished website.

References

• "CSS: The Missing Manual"; David Sawyer McFarland; 2009