CSS布局
CSS布局解决方案
摘自:无悔铭《css布局解决方案(终极版)》https://segmentfault.com/a/1190000013565024
水平居中
方案一:使用inline-block + text-align
原理:
- 1)先将子元素由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中
-
- 子框设置display:inline-block;父框设置:text-align:center;
代码:
`<div class="parent">
<div class="child">DEMO</div>
</div>
.child{
display:inline-block;
}
.parent{
text-align:center;
}
`
优缺点:
- 优点:兼容性郝,甚至兼容IE6/7
- 缺点:child里的文字也会水平居中,可以在.child添加text-align:center;还原
方案二:table + margin
原理:
- 先将子框设置为块级表格来显示,再设置子框居中以达到水平居中
- 子框设置display:table;margin:0 auto;
代码:
<div class="parent">
<div class="child">Demo</div>
</div>
.child{
display:table;
margin:0 auto;
}
优缺点:
- 优点:只设置了child,IE8以上都支持
- 缺点:不支持IE6/7,将div换成table