在css中新手遇見的置中問題

來源:互聯網
上載者:User

標籤:設定   2-2   遇見   margin   family   mic   alt   對齊   16px   

     text-align 屬性是規定元素中的文本的水平對齊。然後當我們需要讓一個元素中的常值內容置中時就會給改元素添加一個text-align:center屬性,但是我們初學者在實際操作中需要給某元素(例如div1)裡面的所有內容都置中時,我們也會直接給div1添加text-align:center屬性,這時候會發現並不是所有的元素都置中了...

例如下面的代碼中:

運行效果如下:

可以看出父元素div裡面的子項目div貌似置中了,其實不然,因為我的子項目div沒有設定寬高

審查元素可以看出

現在給div加一個寬度,

 

 運行效果如下,

發現父元素div裡面的text-align:center屬性並沒有生效

那麼我把子項目div換成內嵌元素span,看看效果,

 

 

通過審查元素可以發現,span被置中了,說明text-align:center;這個屬性不僅對文本有用,對於父元素中的內聯子項目也是有用的。當給span加一個寬高屬性時,就變得不能置中,因為這事span已經變成區塊層級元素了

總結一下新手經常會遇到的置中問題,讓子項目在父元素中水平置中,一般用text-align:center屬性來規定文本和內嵌元素的水平置中,如果想讓區塊層級元素置中對齊一般使用margin:0 auto;

    (註:使用text-align:center屬性在IE7以及IE7以下版本的瀏覽器中時可以置中的,但在IE8及以上版本的瀏覽器或者其他標準的瀏覽器中是沒有效果的)

在css中新手遇見的置中問題

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: