在css中新手碰見的居中問題

     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及以上版本的瀏覽器或者其餘標準的瀏覽器中是沒有效果的）