margin:0 auto 不能实现水平居中的几种情况
对行内块和行内元素设置auto,margin只对block起作用
margin:0 auto只对block块元素起作用,当给想要居中的inline-block行内快元素或者inline行内元素设置margin:0 auto实现水平居中是不管用的,可以转换成块元素之后再使用。
外层元素设置float
有时不注意给要设置居中的外层元素设置了float(float:left或者float:right),因为设置了float后会让内层元素靠左或者靠右浮动,但是有设置auto想要水平居中,显然出现了逻辑上的错误,就不能实现居中效果了。
没声明DOCTYPE
DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分!
需要居中的元素没有设置宽度
margin:0 auto 中auto的意思是根据元素左右宽度自适应,但是在块元素不设置宽度width的情况下,宽度width默认是100%,这样不能实现宽度的自适应,从而不能达到水平居中的效果。
选择器混淆
直接给body设置margin:0 auto, margin:0 auto应该是作用对象,如div,p,而不是body。除非你定义body的宽度,那将会让body内的元素产生位置变化。
如果上面的几种方法解决了都不能实现水平居中,则可以用 text-align:center。到body中加上text-align:center,这样不仅是div,文字也会居中显示。