First look at me a simple xhtml/html file code (part), our aim is to make the #container horizontally centered.
Div#container? {
Margin-left:?auto;
Margin-right:?auto;
width:?168px;
}
This scheme works in any contemporary browser, even if it is IE6, provided that it is in Web Standard compatibility mode (Compliance?mode). Unfortunately, it does not work in previous versions of Ie/win. Let's make a table for this:
Browse Adaptive boundary support checklist? Browser version? Support?
Internet Explorer 6.0, Compliance?mode?
Internet Explorer 6.0, Quirks?mode?
Internet Explorer 5.5 Windows?
Internet Explorer 5.0 Windows?
Internet Explorer 5.2 Macintosh?
All current versions of Mozilla?
Mozilla Firefox? All versions?
Netscape?4.x?
netscape?6.x+, huh?
opera?6.0,?7.0? Macintosh?and? Windows?
safari?1.2, huh?
Despite the limitations of browser support, most designers advocate that you do as much as you can. But we can still use CSS to handle everything.
Use text arrangement (text-align)
This scheme needs to use the Text-align property, apply to the BODY element and give the value of center.
body{
Text-align:center;
}
It treats all kinds of browsers fairly, completely, and at their fingertips. However, this is given the nature of the text, which makes the text in the #container also centered. So, we have to do some extra work on the layout:
div#container{
Text-align:?left;
}
This allows you to return the text alignment to the default state.
Integrated borders and text alignment
Because the text is backward-compatible and contemporary browsers support adaptive boundaries, 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, still imperfect, because it is still a hacker skill? (hack). You have to write down the extra rules for the text arrangement. But now, we can use a more perfect cross-browser scenario.
Negative Boundary Solutions
This scheme is combined with absolute positioning (absolute?positioning?). First of all, put the #container absolute positioning and left offset 50%, so that #container的左边界就是页面分辨率的一半. Next, set the left edge of the #container to a negative value, which is half the width of #container.
#container? {
Background: #ffc? URL (mid.jpg) repeat-y?center;
Position:?absolute;
left:?50%;
width:?760px;
margin-left:?-380px;
}
Look, there is no hacker skill (no?hacks)! Even netscape?4.x support!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
