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

主要從事網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站建設(shè)、程序開(kāi)發(fā)、微網(wǎng)站、小程序設(shè)計(jì)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷(xiāo)、管理等多方位專(zhuān)業(yè)化運(yùn)作于一體，具備承接不同規(guī)模與類(lèi)型的建設(shè)項(xiàng)目的能力。

基本概念：

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ū)別。

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

分享題目：margin:0auto與text-align:center有哪些區(qū)別-創(chuàng)新互聯(lián)
瀏覽地址：http://weahome.cn/article/dpoeod.html