css笔记-margin: 0 auto失效的情况

margin: 0 auto只能用于设置了宽度的块级元素

以下情况会失效

1. 块级元素没有设置高宽 ，

li {
   border: 1px dashed #ccc;
   margin: 0 auto;
}

• 解决

li {
	width: 210px;
   height: 60px;
   border: 1px dashed #ccc;
   margin: 0 auto;
}

2. 应用于加了浮动的块级元素 ，因为浮动脱离了标准流，是不能生效的

li {
width: 210px;
   height: 60px;
   float: left;
   border: 1px dashed #ccc;
   border-bottom: 1px dashed #ccc;
   margin: 0 auto;
}

• 解决，用text-align: center;替换 margin: 0 auto;即可

li {
	width: 210px;
   height: 60px;
   border: 1px dashed #ccc;
   text-align: center;
}

3. 应用于加了绝对定位的块级元素 ，跟浮动是一样的原因，因为浮动脱离了标准流，是不能生效的

li {
width: 210px;
   height: 60px;
   position: absolute;
   border: 1px dashed #ccc;
   border-bottom: 1px dashed #ccc;
   margin: 0 auto;
}

• 解决，用text-align: center;替换 margin: 0 auto;即可

li {
	width: 210px;
   height: 60px;
   border: 1px dashed #ccc;
   text-align: center;
}

4. 应用到img标签也是不行的

• img标签是个特殊的标签，它跟input一样，同属于行内替换元素，效果等于块元素，但是它本质上还是行内元素！！所以使用margin:0 auto 无效，但是可以用margin-left。