css布局網(wǎng)頁(yè)水平居中常用方法

更新時(shí)間：2007年12月13日 19:50:12 投稿：mdxy-dxy

頁(yè)面水平居中一般會(huì)令人很頭疼，尤其新手。瀏覽器之間的不兼容也會(huì)帶來(lái)很大問(wèn)題。本篇文章主要介紹了css布局網(wǎng)頁(yè)水平居中常用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

頁(yè)面水平居中一般會(huì)令人很頭疼，尤其新手。瀏覽器之間的不兼容也會(huì)帶來(lái)很大問(wèn)題。下面來(lái)說(shuō)一下常見(jiàn)的頁(yè)面水平居中辦法。

以下內(nèi)容參見(jiàn)《精通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)容重新對(duì)準(zhǔn)左邊即可。

非IE：

#wrapper {  
   width:720px;  
   margin:0 auto;  
}

如何兼容IE和非IE?如下：

#wrapper {  
   width:720px;  
   position:relative;  
   left:50%;  
   margin-left:-360px;  
}

首先將容器左邊邊緣定位到頁(yè)面中間，然后向左移動(dòng)它寬度的一半。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

網(wǎng)頁(yè)布局設(shè)計(jì)的標(biāo)準(zhǔn)尺寸
許多的網(wǎng)頁(yè)設(shè)計(jì)在進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)時(shí),進(jìn)行界面網(wǎng)頁(yè)的寬度尺寸設(shè)計(jì)都比較迷茫,800*600尺寸及1024*768尺寸的分辨率下,網(wǎng)頁(yè)應(yīng)該設(shè)計(jì)為多少像素才合適呢?太寬就會(huì)出現(xiàn)水平滾動(dòng)條了,下面我們就網(wǎng)頁(yè)設(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)頁(yè)渲染效率的11點(diǎn)注意事項(xiàng)
CSS學(xué)習(xí)越深入，我們需要關(guān)注的細(xì)節(jié)之處就越多，今天我們通過(guò)11個(gè)注意點(diǎn)來(lái)提高CSS的網(wǎng)頁(yè)渲染效率。
2008-08-08
用<TABLE>語(yǔ)句來(lái)實(shí)現(xiàn)圓角表格可以省去制作圓角圖片之苦！
用<TABLE>語(yǔ)句來(lái)實(shí)現(xiàn)圓角表格可以省去制作圓角圖片之苦！...
2007-04-04
絕對(duì)定位的DIV寬度自動(dòng)適應(yīng)的一個(gè)方法
絕對(duì)定位的DIV寬度自動(dòng)適應(yīng)的一個(gè)方法...
2007-02-02
動(dòng)態(tài)更改網(wǎng)頁(yè)HTML元素(對(duì)象)內(nèi)容
動(dòng)態(tài)更改網(wǎng)頁(yè)HTML元素(對(duì)象)內(nèi)容...
2006-11-11
CSS技巧DIV為空時(shí)占據(jù)空間的解決辦法
如果給div元素設(shè)置了寬度時(shí)，比如width:100%，此時(shí)div在IE中（IE6，IE7）將占據(jù)物理空間，而在FF中不占據(jù)物理空間（正確理解）。為了表述直觀，將樣式直接寫(xiě)在元素標(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