CSS布局解决方案

摘自：无悔铭《css布局解决方案（终极版）》https://segmentfault.com/a/1190000013565024

水平居中

方案一：使用inline-block + text-align

原理：

• 1）先将子元素由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中
• 2) 子框设置display:inline-block;父框设置：text-align:center;

代码：

`<div class="parent">
    <div class="child">DEMO</div>
</div>
.child{
    display:inline-block;
}
.parent{
    text-align:center;
}
`

优缺点：

1. 优点：兼容性郝，甚至兼容IE6/7
2. 缺点：child里的文字也会水平居中，可以在.child添加text-align:center;还原

方案二：table + margin

原理：

1. 先将子框设置为块级表格来显示，再设置子框居中以达到水平居中
2. 子框设置display:table;margin:0 auto;

代码：

<div class="parent">
    <div class="child">Demo</div>
</div>
.child{
    display:table;
    margin:0 auto;
}

优缺点：

1. 优点：只设置了child，IE8以上都支持
2. 缺点：不支持IE6/7,将div换成table

• 还没有人评论，欢迎说说您的想法！

相关课程

从零开始学习JavaScript

6871 0元 限免

Web前端入门教程

5923 9.8元

Web前端页面制作快速入门

5500 9.8元