margin:0 auto與text-align:center有哪些區(qū)別

這篇文章主要講解了“margin:0 auto與text-align:center有哪些區(qū)別”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“margin:0 auto與text-align:center有哪些區(qū)別”吧！

基本概念：

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

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

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

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

　　注釋：所有瀏覽器都支持 text-align 屬性；任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

2.margin 是設(shè)置對(duì)象四邊的外延邊距，被稱為外補(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ì)象（或與之類似的元素）的居中。

2.margin:0 auto 設(shè)置塊元素（或與之類似的元素）的居中。

這兩個(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ì)齊，也就是說text-align:center;同時(shí)作用于元素p與元素img。 在FF中，段落P，沒有能實(shí)現(xiàn)居中對(duì)齊，而圖片img實(shí)現(xiàn)了居中對(duì)齊，也就是說text-align:center;作用于img標(biāo)簽，而段落p標(biāo)簽沒有起到居中的作用。

2.當(dāng)設(shè)置段落 p {margin:0 auto;}。 在IE與FF中，段落P均實(shí)現(xiàn)了居中對(duì)齊。圖片img由于不是作用對(duì)象，所以不會(huì)居中對(duì)齊。

有三種情況需要說明： 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類于內(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ū)別。

感謝各位的閱讀，以上就是“margin:0 auto與text-align:center有哪些區(qū)別”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)margin:0 auto與text-align:center有哪些區(qū)別這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！