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