| |
總結(jié)一下css讓頁(yè)面居中對(duì)齊的方法
1.我們常用的margin:0 auto;方法
這個(gè)方法是大家用的最多的方法，使用的時(shí)候必須為容器制定寬度！
例子：
#main {width:960px;margin:0 auto;}
這個(gè)在大部分瀏覽器里面都可以很好的實(shí)現(xiàn)效果。
但是在IE6之前的版本中卻不被支持，下面看一下第二種方法
2. 用text-align實(shí)現(xiàn)居中，這個(gè)方法其實(shí)算是一個(gè)hack。
這個(gè)方法把整個(gè)頁(yè)面當(dāng)作文本對(duì)待，把body的屬性設(shè)置為{text-align:center;}
這樣的話頁(yè)面所有內(nèi)容全部居中了，還需要把頁(yè)面總的外框（wrap）屬性{text-align:left;}
這樣的話頁(yè)面就居中了！
代碼：
body{text-align:center;}
wrap {text-align:left;}
3.負(fù)的外邊距
負(fù)外邊距需要和絕對(duì)定位同時(shí)使用，才會(huì)生效。
首先需要一個(gè){wrap}來(lái)包裹所有的頁(yè)面內(nèi)容，并將其定位到頁(yè)面的50%。這樣{warp}容器據(jù)瀏覽器左邊50%的距離。
然后再用負(fù)邊距，將容器左邊距設(shè)置為{wrap}寬度的一半即可。
看代碼：
#wrap {width:800px;position:absolute;left:50%;margin:0 0 0 -400px;}
這樣wrap就居中對(duì)齊了，這個(gè)方法基本上可以兼容所有的瀏覽器了。
綜上所述：第一種方法是我們大家首選的解決方案，第二種方法其實(shí)可以和第一種方法結(jié)合起來(lái)用更好，第三種方法是是可以兼容所有的瀏覽器，如果你對(duì)你的也頁(yè)面兼容性要求的高些，這個(gè)也可以作為你的首選哈！ |
|
|
| 【收藏】【打印】【進(jìn)入論壇】 |
|
|
|
|
| |
|
|
|
