Home > Web Front-end > CSS Tutorial > 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中文网
Release: 2016-05-16 12:06:34
Original
1522 people have browsed it

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;   
}
Copy after login

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;   
}
Copy after login


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;   
}
Copy after login


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)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template