page layouts in Web standards are implemented using DIV with CSS. This is the most commonly used to make the entire page horizontally centered effect, which is the basic page layout, but also the most should master the knowledge. However, often people ask this question, here I briefly summarize the use of Div and CSS to achieve the horizontal center of the page method:
Margin:auto 0 and Text-aligh:center
In modern browsers (such as Internet Explorer 7, Firefox, opera, etc.) modern browser to achieve a horizontal center is simple, as long as the left and right side of the blank to automatically. Meaning:
#wrap {margin:0 auto;}
The above code means to make wrap this div to the left and right sides of the distance automatically set, up and down 0 (can be arbitrary). Run your current code in a modern browser such as Internet Explorer 7, Firefox, opera, and so on:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "
<html xmlns=" "
<head>
< Title>52css.com</title>
<meta http-equiv= "Content-type" content= "html" charset=utf-8
<style type= "Text/css"
Div#wrap {
width:760px;
margin:0 auto;
border:1px solid #333;
Background-color: #ccc;
}
</style>
</head>
<body>
<div id= "wrap" is centered horizontally in a modern browser setting page elements such as Firefox, As long as the specified margin:0 auto;
<pre>
Div#wrap {
width:760px;
margin:0 auto;/* Here's 0 can be any value */
border:1px Solid #ccc;
Background-color: #999;
}
</pre>
</div>
</body>
</html>
The effect is good. But it doesn't work in Internet Explorer 6 and the corrected version, but luckily it has its own solution. The Text-align property in Internet Explorer is inheritable, that is, when set in the parent element, it defaults to the attribute in the child element. So we can set the Text-align property value to center in the Body tab so that all the elements in the page are centered automatically, and we have to add a hook to turn the text in the page into our usual reading style-left-aligned. So we're going to write code like this:
body {text-align:center;}
#wrap {text-align:left;}
This makes it easy to center the div in Internet Explorer. So to display the center effect in all browsers, we can write our code like this:
body {text-align:center;}
#wrap {text-align:left;
margin:0 Auto;
}
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "
<html xmlns=" "
<head>
< Title>52css.com</title>
<meta http-equiv= "Content-type" content= "html" charset=utf-8
<style type= "Text/css"
Body {text-align:center;}
Div#wrap {
Text-align:left
width:760px
margin:0 auto;
border:1px solid #333;
Background-color : #ccc;
}
</style>
</head>
<body>
<div id= "wrap"
set in modern browsers such as FirefoxThe page element is centered horizontally, as long as the specified margin:0 auto;
<pre>
Div#wrap {
width:760px;
margin:0 auto;/* Here's 0 can be any value */
border:1px solid #ccc;
Background-color: #999;
}
In the version of Internet Explorer 6 and below, we will also make the following settings:
body {text-align:center;}
Div#wrap {
Text-align:left;
}
</pre>
</div>
</body>
</html>
But here's the premise of setting the centered element to have a fixed width, like here we set it to 760 pixels.
Second, relative positioning and negative margin
For wrap, the offset is offset by using a negative margin. This approach is simple and easy to implement:
#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px
}
This code means that the positioning of the wrap is relative to the body label of its parent element, and then the left border is moved to the middle of the page (that is, the left:50% meaning) Finally, we offset the distance from the middle position to the left half, thus achieving the horizontal center.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "
<html xmlns=" "
<head>
< Title>52css.com</title>
<meta http-equiv= "Content-type" content= "html" charset=utf-8
<style type= "Text/css"
Div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #333;
Background-color: #ccc;
}
</style>
</head>
<body>
<div id= "wrap"
is valid in all browsers:
<pre
Div#wrap {
position:relative
width:760px;
left:50%;
margin-left:-380px;
border:1px Solid #333;
Background-color: #ccc;
}
</pre>
</div>
</body>
</html>
Again, you need to set a fixed width before you set the horizontal center.
Which method do you choose?
Which of the above two methods to choose is good? In the first method looks like the use of hack technology, in fact, it is a standard web standards, fully compliant with the specification, therefore, two kinds of methods can be arbitrarily choose any one of them to use, they do not have the problem of CSS hack.
Third, other center mode
The
Above all is the implementation of the horizontal center with the specific width set. Sometimes we want to do an elastic layout, or when an element is in a container we just want to center it and don't want to set a specific width. In fact, this is not really a center layout, like a 100%-length element, you say it is centered or left-aligned? So all the middle of the low width is not really centered. This design we are using like elements of the padding to set, in fact, we have changed the size of the parent element container:
If we want the length of the wrap element to change with the window, while maintaining the center, we can write:
Body {
Padding : 10px 150px;
}
Here, we just need to keep the padding on the left and right sides of the parent element equal.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "
<html xmlns=" "
<head>
< Title>52css.com</title>
<meta http-equiv= "Content-type" content= "html" charset=utf-8
<style type= "Text/css"
Body {
padding:10px 150px;
}
Div#wrap {
border:1px solid #333;
Background-color: #ccc;
}
</style>
</head>
<body>
<div id= "wrap"
a flexible, centered layout that changes with the size of the browser window:
<pre>
Body {
padding:10px 150px;
}
Here, we just need to keep the padding on the left and right sides of the parent element equal.
</pre>
</div>
</body>
</html>
Of course it's just "seemingly centered," but it's often useful.
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
