Home > Article > Web Front-end > Common methods for horizontally centering web pages in CSS layout_Experience exchange
Common methods for horizontally centering web pages in CSS layout_Experience exchange
- PHP中文网Original
- 2016-05-16 12:06:341503browse
horizontal centering of the page is generally a headache, especially for novices. incompatibility between browsers can also cause big problems. let’s talk about common ways to center the page horizontally.
see "mastering css" for the following content.
html code:
the code is as follows
<body>
<div id="wrapper">
</div>
</body>
ie居中办法：
body {
text-align:center;
min-width:760px;
}
#wrapper {
width:720px;
text-align:left;
}ie will mistake text-align:center to center everything, not just the text. then realign the contents of the container to the left.
non-ie:
the code is as follows:
#wrapper {
width:720px;
margin:0 auto;
}
how to make it compatible with ie and non-ie? as follows:
the code is as follows:
#wrapper {
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
first position the left edge of the container to the middle of the page, and then move it half its width to the left.
the above is the common method for horizontal centering of css layout web pages_the content of experience exchange. for more related content, please pay attention to the php chinese website (www.php.cn)!