Page layout in web standards is implemented using Div and CSS. The most commonly used one is the effect of horizontally centering the entire page. This is the basic knowledge in page layout and the knowledge that should be mastered first. However, people still often ask this question. Here I will briefly summarize the method of using Div and CSS to achieve horizontal centering of the page:
1. margin:auto 0 and text-aligh:center
are used in modern browsers (such as Internet Explorer 7, Firefox, Opera, etc.) The method to achieve horizontal centering in modern browsers is very simple, just set the left and right margins to automatic. Meaning:
#wrap { margin:0 auto;}
The above code means that the distance between the wrap div and the left and right sides is automatically set, with the upper and lower values being 0 (can be any). Please run the current code in a modern browser (such as Internet Explorer 7, Firefox, Opera, etc.):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/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">
To set the horizontal centering of page elements in modern browsers such as Firefox, just specify margin:0 auto;
<pre>
div#wrap {
width:760px;
margin:0 auto; /*0 here can be any value*/
border:1px solid #ccc;
background-color:#999;
}
</pre>
</div>
</body>
</html>
The above works very well. But this doesn't work in Internet Explorer 6 and later, but luckily it has its own workaround. In Internet Explorer, the text-align attribute is inheritable, that is, after it is set in the parent element, it will have this attribute in the child element by default. Therefore, we can set the text-align attribute value in the body tag to center, so that all elements on the page will be automatically centered. At the same time, we also need to add a hook to change the text on the page to the way we are accustomed to reading - left-aligned. So we have to write the code like this:
body {text-align:center;}
#wrap {text-align:left;}
In this way, we can easily achieve center alignment of Div in Internet Explorer. Therefore, to display the centering 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" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/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">
To set the horizontal centering of page elements in modern browsers such as Firefox, just specify margin:0 auto;
<pre>
div#wrap {
width:760px;
margin:0 auto; /*0 here can be any value*/
border:1px solid #ccc;
background-color:#999;
}
In Internet Explorer 6 and below, we also need to make the following settings:
body { text-align:center; }
div#wrap {
text-align:left;
}
</pre>
</div>
</body>
</html>
But there is a premise here, that is, the centered element must have a fixed width. For example, here we set it to 760 pixels.
2. Relative positioning and negative margins
Perform relative positioning for wrap, and then use negative margins to offset the offset. This method is relatively simple and easy to implement:
#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px
}
The meaning of this code is to set the positioning of wrap relative to the body tag of its parent element, and then move its left border to the middle of the page (that is, the meaning of left:50%); finally, we move from the middle position to the left Offset it back half the distance so that it is horizontally centered.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/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">
Method that works 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>
Similarly, you need to set a fixed width before setting horizontal centering.
Which method to choose?
Which of the above two methods is better? The first method seems to use Hack technology, but in fact it does not. It is a quite satisfactory Web standard writing method and fully complies with the specifications. Therefore, you can choose any one of the two methods for use. They do not There is a CSS hack problem.
3. Other centering methods The
above mentioned are all implementations of horizontal centering when a specific width is set. Sometimes we want to make a flexible layout, or when an element is in a container we just want it to be centered and don't want to set a specific width. In fact, this is not a true centered layout. For an element with 100% length, would you say it is centered or left aligned? So all centering without height and width is not true centering. We set this design using the padding of the element. In fact, we change the container size of the parent element:
If we want the length of the wrap element to change with the window while maintaining the center, we can write like this:
body {
padding:10px 150px;
}
Here, we only 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" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/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 browser window size:
<pre>
body {
padding:10px 150px;
}
Here, we only need to keep the padding on the left and right sides of the parent element equal.
</pre>
</div>
</body>
</html>
Of course this only "seems to be centered", but it is often very useful.