css布局網(wǎng)頁水平居中常用方法
更新時(shí)間：2007年12月13日 19:50:12 投稿：mdxy-dxy
頁面水平居中一般會(huì)令人很頭疼，尤其新手。瀏覽器之間的不兼容也會(huì)帶來很大問題。本篇文章主要介紹了css布局網(wǎng)頁水平居中常用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
頁面水平居中一般會(huì)令人很頭疼，尤其新手。瀏覽器之間的不兼容也會(huì)帶來很大問題。下面來說一下常見的頁面水平居中辦法。
以下內(nèi)容參見《精通CSS》。
HTML代碼：
<body>
<div id="wrapper">
</div>
</body>
IE居中辦法：
body {
text-align:center;
min-width:760px;
}
#wrapper {
width:720px;
text-align:left;
}
IE會(huì)將text-align:center 誤以為讓所有東西居中，而不只是文本。然后將容器的內(nèi)容重新對準(zhǔn)左邊即可。
非IE：
#wrapper {
width:720px;
margin:0 auto;
}
如何兼容IE和非IE?如下：
#wrapper {
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
首先將容器左邊邊緣定位到頁面中間，然后向左移動(dòng)它寬度的一半。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
網(wǎng)頁布局設(shè)計(jì)的標(biāo)準(zhǔn)尺寸
許多的網(wǎng)頁設(shè)計(jì)在進(jìn)行網(wǎng)頁布局設(shè)計(jì)時(shí),進(jìn)行界面網(wǎng)頁的寬度尺寸設(shè)計(jì)都比較迷茫,800*600尺寸及1024*768尺寸的分辨率下,網(wǎng)頁應(yīng)該設(shè)計(jì)為多少像素才合適呢?太寬就會(huì)出現(xiàn)水平滾動(dòng)條了,下面我們就網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn)尺寸進(jìn)行講解.2008-03-03
HTML5實(shí)戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)
本文主要介紹HTML5實(shí)戰(zhàn)與剖析之觸摸事件，介紹的比較詳細(xì)，需要的朋友可以參考下。2016-06-06
提高CSS網(wǎng)頁渲染效率的11點(diǎn)注意事項(xiàng)
CSS學(xué)習(xí)越深入，我們需要關(guān)注的細(xì)節(jié)之處就越多，今天我們通過11個(gè)注意點(diǎn)來提高CSS的網(wǎng)頁渲染效率。2008-08-08
用<TABLE>語句來實(shí)現(xiàn)圓角表格可以省去制作圓角圖片之苦！
用<TABLE>語句來實(shí)現(xiàn)圓角表格可以省去制作圓角圖片之苦！...2007-04-04
絕對定位的DIV寬度自動(dòng)適應(yīng)的一個(gè)方法
絕對定位的DIV寬度自動(dòng)適應(yīng)的一個(gè)方法...2007-02-02
動(dòng)態(tài)更改網(wǎng)頁HTML元素(對象)內(nèi)容
動(dòng)態(tài)更改網(wǎng)頁HTML元素(對象)內(nèi)容...2006-11-11
如果給div元素設(shè)置了寬度時(shí)，比如width:100%，此時(shí)div在IE中（IE6，IE7）將占據(jù)物理空間，而在FF中不占據(jù)物理空間（正確理解）。為了表述直觀，將樣式直接寫在元素標(biāo)簽內(nèi)：2008-03-03
line-block的運(yùn)用最小寬度的設(shè)置
line-block：本身是內(nèi)聯(lián)盒模型的存在，又具備塊狀盒模型的特性。很好很強(qiáng)大的東西啊～2008-05-05
用css alpha 濾鏡 實(shí)現(xiàn)input file 樣式美化代碼
用css alpha 濾鏡 實(shí)現(xiàn)input file 樣式美化代碼...2007-12-12
CSS樣式表規(guī)劃與管理的經(jīng)驗(yàn)總結(jié)
CSS樣式表規(guī)劃與管理的經(jīng)驗(yàn)總結(jié)...2007-09-09