margin: 0 auto; 只对块级元素生效
所以margin:0 auto的用法分为三种,分别为
- 块级元素:div、h1~h3、ul
- 行内元素:span、a
- 行内块元素:button、img、input、textarea
用法一:
对于块级元素,只需要设置width
<div class="block">块级元素</div>
div{
width: 200px;
background-color: #ccc;
margin:0 auto;
}
用法二:
对于行内元素,需要先设置为块级元素,再加宽度
<span>行内元素</span>
span{
display:block;
width: 200px;
background-color: red;
margin:0 auto;
}
用法三:
对于行内块级元素,需要设置为块级元素,可以不用设置宽度
<input type="text">
span{
display:block;
background-color: #ededed;
margin:0 auto;
}