margin和text-align实现水平居中的区别

Posted 2021-12-02 jing-tian

1.首先text-align只应用于内联块和内联元素

text-align影响的是元素中的文本内容的对其方式（默认是left，设置为center时水平居中）

所以，将text-align设置为center时，只有当应用于块级元素并且元素内容为文本时，才会生效，即text-align不会控制元素的对齐，而只影响其内容文本

2.首先margin也只应用于块级元素

上下边界为0，左右根据宽度自适应！这就是水平居中的意思，使用 margin:0px auto; 也是大家在做css div定位时的最常用方法。

margin只控制元素在父元素中的对齐，而不会影响自身的内容（即文本内容），另一个不同时，当元素设置为浮动时，左右margin设置为auto来居中元素的方式会失效，因为这种居中方式原本利用的就是正常流中七个属性和相加等于父元素的width值，而text-align原本就是将块级元素中的文本居中，与是否浮动或是否是正常流无关。margin设置为auto会对普通流（正常流）中的块级元素有效了。

如果一个元素前面设了margin:0px auto; 但是后面又设了margin:100px，这明显是相矛盾的，不仅如此，如果同时使用了margin:0px auto ; 和 float:left ，也一样都不生效。

区别：

margin 是指当前元素到相邻元素间的距离。

text-align 指当前元素中内容的对其方式。