text-align的初始值（auto居中的实际应用）
text-align的初始值（auto居中的实际应用）background: pink; height: 40px;```css.text{ width: 1000px;
text-align: 属性规定元素中的文本的水平对齐方式;
margin 是设置对象四边的外延边距，被称为外补丁或外边距。
这两个属性相信大家都知道是什么，但是在实际的应用中，总是会有一些疑问？或者不知道该怎么用，接下来上代码
1，text-align的水平对齐
```css
.text{
width: 1000px;
height: 40px;
background: pink;
text-align: center;/* 文字水平居中*/
}
```
```html
<p class="text">月亮不睡你不睡，你是秃头小宝贝</p>
```
如果用浏览器打开是能看出来文字在宽度为1000的范围内是水平居中的，一点毛病没有。但是如果把p标签换成了span标签，你会发现它就无法居中了，因为span标签是个内联元素，不认识宽度和高度，也就是说当前span标签的宽度其实就是文字撑开的宽度，没有剩余的空间，所以text-align就无法进行水平居中。
```html
<span class="text">月亮不睡你不睡，你是秃头小宝贝</span>
```
2，margin:0 auto的对齐
我们知道margin:0 auto 是让一个元素在哪个范围里水平居中，那么前提还是得有一个宽度，比如
```html
.all{ width: 1600px;}
.text{
width: 1000px;
height: 40px;
background: pink;
margin: 0 auto;
}
<div class="all">
<p class="text">月亮不睡你不睡，你是秃头小宝贝</p>
</div>
```
因为.all有个宽度为1600px，所以.text的宽度1000在1600的范围里有剩余600的空间，所以margin:0 auto是可以进行元素的水平居中，但是如果.text里没有宽度1000，那么元素是不会进行居中的，因为p标签是个块元素，块元素的宽度不写则为100%，这时.text的宽度就变成了1600，没有剩余空间，所以无法进行居中。
同样，如果p标签换成了内联元素的标签如span，也是无法进行居中的，因为span不认识宽度和高度
```html
.text{
width: 1000px;
height: 40px;
background: pink;
margin: 0 auto;;
float:left; }
```
如果添加了左浮动(float：left)这时margin:0 auto，也无法进行水平居中，因为给元素添加了浮动，就相当于转了元素类型为inline-block（内联块元素），那么内联元素是不支持margin:0 auto的。
总结：
1 如果是内联元素或者内联块元素想让在容器中水平居中就可以用text-align:center 前提是必须得有一个剩余空间，并且加给父元素，因为text-align属性可以继承。常用的内联元素和内联块元素标签有，a span b strong i em input img select textarea等
2 如果是块元素想让让标签在容器中水平居中就用margin:0 auto;前提也是要有一个范围的剩余空间。
常用的块元素标签有p h1 h2 h3 h4 h5 h6 form div ul li ol dl dt dd等
