margin:0 auto與text-align:center的基本概念及區(qū)別介紹

發(fā)布時(shí)間：2014-08-20 09:59:47 作者：佚名

text-align: 屬性規(guī)定元素中的文本的水平對(duì)齊方式，margin 是設(shè)置對(duì)象四邊的外延邊距，被稱(chēng)為外補(bǔ)丁或外邊距，不了解的朋友可以參考下

基本概念：

1.text-align: 屬性規(guī)定元素中的文本的水平對(duì)齊方式;

　　　　　　該屬性通過(guò)指定行框與哪個(gè)點(diǎn)對(duì)齊，從而設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式;

　　　　　　一般情況下設(shè)置文本對(duì)齊方式的時(shí)使用此屬性。支持值 justify。

　　Example: div { text-align: left; } //文本居左對(duì)齊

　　注釋?zhuān)核袨g覽器都支持 text-align 屬性；任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

2.margin 是設(shè)置對(duì)象四邊的外延邊距，被稱(chēng)為外補(bǔ)丁或外邊距。

　　Example: div { margin: 20px 10px 30px 40px; } // 表示對(duì)象外邊距，頂20px、右10px、下30px、左40px

區(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)簽。　　

注意：

1.當(dāng)設(shè)置body{text-align:center;}。在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;}

知識(shí)點(diǎn)：塊元素，內(nèi)聯(lián)元素的區(qū)別。