1. Use automatic centering margins achieved
so that the element is centered horizontally in the preferred method is to use CSS margin property - the margin-left and margin-right property element is set to auto. In actual use, we can create a div plays the role of container required for these centering elements. Require special note is that, to be designated as the width of the container:
{
div Container # {
margin-left: Auto;
margin-right: tuto;
width: 168px;
}
}
This method requires IE browser version is not less than 6.0.
2. text-align centrally implement
another method to achieve a practical element centered text-align property, the property value to be applied to the center and to the body element. This approach is downright hack, but it is compatible with most browsers, so naturally and then in some cases essential.
They say it is a hack, because this method does not apply to the text attributes the text, but applied to the element as a container. This also gives us extra work.
After creating the necessary div good layout, we have to apply in the following code for the body text-align property:
body {
text-align: Center;
}
What happens after it? body of all descendant elements will be displayed centered.
Therefore, we need to write a rule to let them return to the default text Left-aligned;
the p-{
align = left-text: left;
}
Imagine this additional rules will cause some inconvenience. In addition, the real full compliance with the standard browser and does not change the position of the container, which will only make the text of which centered.
3. The combination of automatic margins and text alignment
because the alignment of the text is centered way has a good downward compatibility, and automatic way margins are also supported by most modern browsers, all the talk about a lot of designers use a combination of both, in order to allow centering effect to maximize cross-browser:
body {
text-align = left: Center;
}
#container {
margin-left: Auto;
margin-right: Auto;
border: 1px Solid Red;
width: 168px;
text-align = left: left ;
}
but this is always a hack, in any case not perfect. We still need to center the text container write additional rules, but at least in every browser looks good.
4. negative margins Solution
negative margins solutions far not just for the added element of negative margins so simple. This method requires the use of absolute positioning and negative margins two techniques.
The following describes the specific implementation of the scheme. First, create a container containing the elements centered, then absolutely positioned at a distance of 50% of the relative position of the left side of the page. In this way, the left outside of the container away from the position of the width of the page by 50% since the beginning.
Then, outside the container from the left set to a negative value of half the width of the container. Such a midpoint is fixed to the container in the horizontal direction of the page.
#container {
background: #ffc URL (mid.jpg) Y REPEAT-Center;
position: Absolute;
left: 50%;
width: 760px;
margin-left: -380px;
}
so that there is no hack. Although this is not the preferred solution, but it is also a good way, and a very wide applicability - even in Netscape Navigator 4.X there are not any problems. So if you want to get the most widely used browser support, then this method will be the best choice
Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2012/11/19/2776675.html