First, let’s take a look at a simple XHTML/HTML file code (part). Our purpose is to center the #container horizontally.
content
Lorem?ipsum?dolor?sit ?amet,?consectetuer?adipiscing?elit.Phasellus?varius?eleifend.
Use adaptive borders (auto?margin)
The preferred way to center any element horizontally is to use the margin property and set the left and right values to auto. But you must specify a width for #container.
div#container?{
margin-left:?auto;
margin-right:?auto;
width:?168px;
}
This scheme works in any modern browser All are valid, even IE6, provided it is in web standards compatibility mode (compliance?mode). Unfortunately it won't work in previous versions of IE/Win. We make a table for this:
Browsing adaptive boundary support list?Browser?Version?Support?
Internet Explorer 6.0, compliance?mode?Yes?
Internet Explorer 6.0, quirks?mode?No?
Internet Explorer 5.5 Windows?No?
Internet Explorer 5.0 Windows?No?
Internet Explorer 5.2 Macintosh?Yes?
Mozilla All current versions?Yes?
Mozilla Firefox?All versions?Yes?
Netscape?4.x?No?
Netscape?6.x+?Yes?
Opera?6.0,?7.0?Macintosh?and?Windows?Yes?
Safari?1.2?Yes?
Despite the limitations of browser support, most designers encourage you to do this whenever possible. But we can still use CSS for all situations.
Use text alignment (text-align)
This solution requires the use of the text-align property, which is applied to the body element and assigned the value of center.
body{
text-align:center;
}
It treats all browsers fairly, very thoroughly, and at your fingertips. However, this is a property given to the text, which causes the text in the #container to be centered as well. So, we have to do some extra work on the layout:
div#container{
text-align:?left;
}
In this way, the text alignment can be returned to the default state.
Integrated borders and text arrangement
Because text arrangement is backward compatible, contemporary browsers also support adaptive borders, and many designers combine them to achieve cross-browser use.
body{
text-align:?center;
}
#container?{
margin-left:?auto;
margin-right:?auto;
border :?1px?solid?red;
width:?168px;
text-align:?left
}
Alas, it’s still not perfect, because it’s still a hack. You have to write redundant rules for text arrangement. But now, we can use a more perfect cross-browser solution.
Negative boundary solution
This solution must be combined with absolute positioning (absolute?positioning?). First, position the #container absolutely and offset it to the left by 50%, so that the left edge of the #container is half the page resolution. Next, set the #container's left margin to a negative value equal to half the #container's width.
#container?{
background:?#ffc?url(mid.jpg)?repeat-y?center;
position:?absolute;
left:?50%;
width :?760px;
margin-left:?-380px;
}
Look, no?hacks! Even Netscape?4.x supports it!
