本文轉(zhuǎn)自:http://hi.baidu.com/feiji123/blog/item/899499192cf7254743a9ad9c.html 我們?cè)O(shè)置某個(gè)對(duì)象水平方向居中的時(shí)候,常常將左右的外邊距設(shè)置為auto來(lái)實(shí)現(xiàn)。如:div { margin: 0 auto; } body{text-align:center}與margin:0 auto的區(qū)別如下: 1.text-align:center設(shè)置文本或img標(biāo)簽等一些內(nèi)聯(lián)對(duì)象(或與之類(lèi)似的元素)的居中。 2.margin:0 auto設(shè)置塊元素(或與之類(lèi)似的元素)的居中。 這兩個(gè)屬性IE與FF的理解也有所不同。我們?cè)O(shè)置一個(gè)段落P,在段落內(nèi)存在一個(gè)圖片img標(biāo)簽。 在IE中,段落P,圖片img同時(shí)實(shí)現(xiàn)了居中對(duì)齊,也就是說(shuō)text-align:center;同時(shí)作用于元素p與元素img。
在FF中,段落P,沒(méi)有能實(shí)現(xiàn)居中對(duì)齊,而圖片img實(shí)現(xiàn)了居中對(duì)齊,也就是說(shuō)text-align:center;作用于img標(biāo)簽,而段落p標(biāo)簽沒(méi)有起到居中的作用。
2.當(dāng)設(shè)置段落 p {margin:0 auto;}。得到下面的圖片 在IE與FF中,段落P均實(shí)現(xiàn)了居中對(duì)齊。圖片img由于不是作用對(duì)象,所以不會(huì)居中對(duì)齊。 有三種情況需要說(shuō)明:
1.margin:0 auto;的選擇器是作用對(duì)象,如div,p,而不是body。如果設(shè)置:body { margin:0 auto; }將不會(huì)達(dá)到任何效果,除非你定義body的寬度,那將會(huì)讓body內(nèi)的元素產(chǎn)生位置變化。如我們?cè)O(shè)置body寬度為500px。對(duì)p段落不作任何設(shè)置,我們最大化窗口將會(huì)看到段落并非處于窗口的最左上角。
2.設(shè)置段落 p {text-align:center;} 將要實(shí)現(xiàn)的并不是段落本身的對(duì)齊方式,而是段落內(nèi)元素居中對(duì)齊。
3.設(shè)置圖片標(biāo)簽img {margin:0 auto;} ,就犯了一個(gè)小錯(cuò)誤,img類(lèi)于內(nèi)聯(lián)對(duì)象,不可以設(shè)置圖片img標(biāo)簽的margin屬性,如果一定要設(shè)置,那么先將它的屬性轉(zhuǎn)變?yōu)閴K元素,如下面的代碼:img {display:block; margin:0 auto;}
如何使用:
1.如果頁(yè)面中的元素,均位于div標(biāo)簽或其它塊元素內(nèi),進(jìn)行了合理的嵌套,我們不必設(shè)置body{text-align:center}。只需要設(shè)置相應(yīng)的div元素margin:0 auto;即可。如上面的代碼所講述,頁(yè)面中的元素均位于段落p標(biāo)簽中,只需要將段落居中即可。
2.如果頁(yè)面中的元素,有一部分不是在div標(biāo)簽或其它塊元素內(nèi),我們需要設(shè)置body{text-align:center}。但也會(huì)遇到問(wèn)題,這樣設(shè)置以后,大部分內(nèi)聯(lián)元素,都居中對(duì)齊了,包括頁(yè)面中其它的一些文本,還需要進(jìn)行相應(yīng)的調(diào)整才能適應(yīng)設(shè)計(jì)的需要。如:我們?cè)O(shè)置body內(nèi)有一個(gè)段落P,在段落內(nèi)有一個(gè)圖片img及一段文本,在body內(nèi)還存在一個(gè)獨(dú)立的圖片img,看下面的圖片
![]() 我們實(shí)現(xiàn)了段落p的居中,同時(shí)也讓位于段落外的圖片實(shí)現(xiàn)了居中,但段落中的圖片與文本居中對(duì)齊了 |
posted @ 2009-04-21 10:48 希 閱讀(1007) | 評(píng)論 (0) | 編輯 收藏