在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及以上版本的浏览器或者其余标准的浏览器中是没有效果的）