margin:0 auto與text-align:center有哪些區別

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

基本概念：

1.text-align: 屬性規定元素中的文本的水平對齊方式;

　　　　　　 該屬性通過指定行框與哪個點對齊，從而設置塊級元素內文本的水平對齊方式;

　　　　　　 一般情況下設置文本對齊方式的時使用此屬性。支持值 justify。

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

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

2.margin 是設置對象四邊的外延邊距，被稱為外補丁或外邊距。

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

區別如下：

1.text-align:center 設置文本或img標簽等一些內聯對象（或與之類似的元素）的居中。

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

這兩個屬性IE與FF的理解也有所不同。我們設置一個段落P，在段落內存在一個圖片img標簽。　　

注意：

1.當設置body{text-align:center;}。 在IE中，段落P，圖片img同時實現了居中對齊，也就是說text-align:center;同時作用于元素p與元素img。 在FF中，段落P，沒有能實現居中對齊，而圖片img實現了居中對齊，也就是說text-align:center;作用于img標簽，而段落p標簽沒有起到居中的作用。

2.當設置段落 p {margin:0 auto;}。 在IE與FF中，段落P均實現了居中對齊。圖片img由于不是作用對象，所以不會居中對齊。

有三種情況需要說明： 1.margin:0 auto;的選擇器是作用對象，如div，p，而不是body。如果設置：body { margin:0 auto; }將不會達到任何效果，除非你定義body的寬度，那將會讓body內的元素產生位置變化。如我們設置body寬度為500px。對p段落不作任何設置， 我們最大化窗口將會看到段落并非處于窗口的最左上角。 2.設置段落 p {text-align:center;} 將要實現的并不是段落本身的對齊方式，而是段落內元素居中對齊。 3. 設置圖片標簽img {margin:0 auto;} ，就犯了一個小錯誤，img類于內聯對象，不可以設置圖片img標簽的margin屬性，如果一定要設置，那么先將它的屬性轉變為塊元素，如下面的代 碼：img {display:block; margin:0 auto;}

知識點：塊元素，內聯元素的區別。

感謝各位的閱讀，以上就是“margin:0 auto與text-align:center有哪些區別”的內容了，經過本文的學習后，相信大家對margin:0 auto與text-align:center有哪些區別這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！