Html: summary of the element horizontal center Solution

Source: Internet
Author: User

Let's take a look at a simple XHTML/HTML file code (partial). Our goal is to center # container horizontally.

<Body>
<Div id = "container">
<H1> content <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend. </p>
</Div>
</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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.