Let's take a look at a simple XHTML/HTML file code (partial). Our goal is to center # container horizontally.
<Body>Use auto margin)
The first choice for any element in the horizontal center is to use the property and set the left and right values to auto. However, you must specify a width for # container.
Div # container {
Margin-left: auto;
Margin-right: auto;
Width: 168px;
}
This solution works in any contemporary browser, even in IE6, provided that it is in the standard web compatibility mode (compliance mode ). Unfortunately, it does not work in earlier IE/Win versions. Here is a table:
List of adaptive border support for browsing browser version support
Internet Explorer 6.0, compliance mode is
Internet Explorer 6.0, quirks mode No
Internet Explorer 5.5 Windows No
Internet Explorer 5.0 Windows No
Internet Explorer 5.2 Macintosh is
All current Mozilla versions are
All Mozilla Firefox versions are
Netscape 4.x No
Netscape 6.x+ is
Opera 6.0, 7.0 Macintosh and Windows is
Safari 1.2 is
Despite restrictions on browser support, most designers advocate that you do as much as possible. But we can still use CSS to cope with all situations.
Use text-align)
This scheme needs to use the text-align property, apply it to the body element and assign the value of the center.
Body {
Text-align: center;
}
It treats all kinds of browsers fairly and is very thorough and readily available. However, this is the attribute given to the text, and it centers the text in # container. Therefore, we have to do some additional work on the layout:
Div # container {
Text-align: left;
}
In this way, the text alignment can be returned to the default state.
Comprehensive border and text Arrangement
Because text arrangement is backward compatible, modern browsers also 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, it is still not perfect, because it is still a hacker technique (hack ). You have to write redundant rules for text arrangement. But now we can use a more perfect cross-browser solution.
Negative border solution
This solution must be combined with absolute positioning (absolute positioning ). First, locate # container and offset it to the left by 50%. In this way, the left boundary of # container is half of the page resolution. Next, set the left boundary of # container to a negative value. The value is half of the width of # container.
# Container {
Background: # ffc url(mid.jpg) repeat-y center;
Position: absolute;
Left: 50%;
Width: 760px;
Margin-left:-pixel PX;
}
No hacker skills (no hacks )! Support for Netscape 4.x!
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
