Text-align:center和margin:0 auto居中的实际应用

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等