Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
centering an absolute positioned div
- Thread starter davikokar
- Start date
That's a contradiction in terms! You can't tell a div to position itself in the middle of a page in absolute terms, because if the viewer changes the browser window width your absolute measurements will be off!
Just set the text-align attribute of the BODY tag to "center", and allow that to center your main div:
HTML:
...
<body>
<div id="content"></div>
</body>
...
CSS:
body {
text-align: center;
}
...
Just set the text-align attribute of the BODY tag to "center", and allow that to center your main div:
HTML:
...
<body>
<div id="content"></div>
</body>
...
CSS:
body {
text-align: center;
}
...
margin: 0 auto; is the shorthand property for the margins, first number (0) applies to top and bottom margins, second (auto) applies to left and right. Meaning that the element will have no margins at the top and bottom and automatic margins on left and right. Automatic means they will be adjusted so that it looks ok. If you specify the width (not the default 100%) of the element, element will center because the margins on both sides will be applied. This works in all standards-compliant browsers (Netscape 7+, Mozilla, FF, Opera, Safari...) but does not work in IE. Maybe it works in IE6 if you specify a correct doctype at the beginning of the document (and thus shift it from quirks mode to standards compliant). text-align: center; in the parent only works for inline elements (<img />,<span>,<input />, regular text).
- Status
Similar threads
- Locked
- Question
- Locked
- Question