DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> margin:0 auto與text-align:center的基本概念及區別介紹
margin:0 auto與text-align:center的基本概念及區別介紹
編輯:CSS詳解     
text-align: 屬性規定元素中的文本的水平對齊方式,margin 是設置對象四邊的外延邊距,被稱為外補丁或外邊距,不了解的朋友可以參考下 基本概念:

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;}

知識點:塊元素,內聯元素的區別。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved