CSS: horizontal center display of elements in CSS

It is not very easy to center the element with CSS. The same CSS center settings have different performances in different browsers. This article introduces several common methods for horizontal center display of elements in CSS.

　　1. Use auto margin to center

In CSS, the preferred way to center the elements horizontally is to use the margin Attribute-set the margin-left and margin-right attributes of the elements to auto. In practice, we can create a container div for these elements that need to be centered. Note that the width must be specified for the container:

Div # container {

Magin-left: auto;

Magin-right: auto;
Width: 168px:

}

In most mainstream browsers, This method is very effective. Even IE6 on Windows can be displayed in its standard compatible mode (compliancemode. Unfortunately, in earlier versions of IE, this setting cannot achieve center effect. Therefore, if you want to use this method in your project, make sure that your IE browser version is no lower than 6.0.

Despite the unsatisfactory support, most designers suggest using this method as much as possible. This method is also considered to be the most correct and reasonable method for implementing the horizontal center of elements using CSS.

2. Use text-align to center

Another way to center an element is to use the text-align attribute to set the attribute value to center and apply it to the body element. This is a complete hack, but it is compatible with most browsers, so it is also essential in some cases.

It is hack because this method does not apply text attributes to text, but to elements used as containers. This also brings us extra work. After creating the div required for the layout, follow the code below to apply the text-align attribute to the body:

Body {

Text-align: center :}

What will happen later? All child elements of the body are displayed in the center.

Therefore, we need to write another rule to bring the text back to the left-aligned by default:

P {text-align: left ;}

It is conceivable that this additional rule will cause some inconvenience. In addition, browsers that fully follow the standard will not change the location of the container, but will only display the text in the center.

3. Combined with auto margin and text alignment

Because the text alignment and center method has good downward compatibility, and the automatic margin method is also supported by most contemporary browsers, many designers combine the two, in order to maximize cross-browser support for the center effect:

Body {text-align: center ;}

# Container {

Margin-right: auto;

Margin-left: auto;

Border: 1 pxsolid red;

Wedth: 168px;

Text-align: left ;}

However, this is always an hack, and it is not perfect in any case. We still need to write additional rules for text in the center container, but at least it looks good in various browsers.

4. negative margin Solution

The negative margin solution is far from simply adding negative margins to elements. This method requires both absolute positioning and negative margin.

The following describes how to implement the solution. First, create a container that contains the center element, and then position the container to 50% relative to the left edge of the page. In this way, the left margin of the container starts from the position of the page 50% width.

Then, set the left margin of the container to half the width of the negative container. In this way, the container is fixed to the point in the horizontal direction of the page.

# Container {

Background: # ffc url(mid.jpg) repeat-y center;

Position: absolute;

Left: 50%;

Width: 760px;

Margin-left:-pixel PX ;}

Although this is not the preferred solution, it is also a good method with wide applicability.

Link: http://hi.baidu.com/aboyi/blog/item/2ff84a905df8bd87ab77a464.html