在Web標(biāo)準(zhǔn)中的頁面布局是使用Div配合CSS來實(shí)現(xiàn)的。這其中常用到的就是使整個頁面水平居中的效果,這是在頁面布局中基本,也是應(yīng)該首先掌握的知識。不過,還是經(jīng)常會有人問到這個問題,在這里我簡單總結(jié)一下使用Div和CSS實(shí)現(xiàn)頁面水平居中的方法:
一、margin:auto 0 與 text-aligh:center
在現(xiàn)代瀏覽器(如Internet Explorer 7、Firefox、Opera等)現(xiàn)代瀏覽器實(shí)現(xiàn)水平居中的方法很簡單,只要設(shè)定到左右兩側(cè)的空白為自動即可。意即:
#wrap { margin:0 auto;}
上面這段代碼的意思是說使wrap這個div到左右兩側(cè)的距離自動設(shè)置,上下為0(可以為任意)。請?jiān)诂F(xiàn)代瀏覽器(如Internet Explorer 7、Firefox、Opera等)中運(yùn)行現(xiàn)在的代碼:
在Firefox等現(xiàn)代瀏覽器設(shè)定頁面元素的水平居中,只要指定margin:0 auto;即可
div#wrap {
width:760px;
margin:0 auto; /*這里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
}
上面的效果很好。但是這在Internet Explorer 6及改正的版本中是不起作用的,不過幸好它有自己的解決辦法。在Internet Explorer中text-align屬性是可繼承的,即在父元素中設(shè)置后在子元素中就默認(rèn)具有了該屬性。因此我們可以在body標(biāo)簽中設(shè)置text-align屬性值為center,這樣頁面內(nèi)所有的元素都會自動居中,同時我們還要加一個hook把頁面中的文字變成我們習(xí)慣的閱讀方式——居左對齊。因此我們要如此來寫代碼:
body {text-align:center;}
#wrap {text-align:left;}
這樣在Internet Explorer中我們就輕松實(shí)現(xiàn)了Div的居中對齊。因此要在所有的瀏覽器中顯示居中的效果,我們就可以這樣寫我們的代碼:
body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}
在Firefox等現(xiàn)代瀏覽器設(shè)定頁面元素的水平居中,只要指定margin:0 auto;即可
div#wrap {
width:760px;
margin:0 auto; /*這里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
}
在Internet Explorer 6 及以下的版本中我們還要做以下的設(shè)置:
body { text-align:center; }
div#wrap {
text-align:left;
}
不過這里有一個前提,就是設(shè)置居中的元素要有固定的寬度,比如這里我們設(shè)定了為760像素。