CSS多个子框架居中的技巧
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
CSS多个子框架居中的技巧
大家知道CSS多个子框架居中吗?下面我们就给大家详细介绍一下吧!我们积累了一些经验,在此拿出来与大家分享下,请大家互相指正。
有时我们需要令一个宽度固定的容器里的子框架居中(例如一个Div ,或者其他block级元素),如果子框架只有一个的话,我们只需要为子框架加上CSS属性margin:auto就可以了。
但如果我们要让多个子框架居中,并且等分父框架剩余的空间的话,我们对所有子框架使用CSS box-align:center 来实现这种效果。
可是目前还有相当一部分主流浏览器不支持box-align属性,那幺我们应该如何编写CSS,使这种效果能兼容大部分的浏览器呢?
通常的方法
为了使多个block级元素排列在同一行里,我们习惯使用float 属性使子框架浮动,然后利用margin属性让每一个子框架之间都留出一些空白的间距。可是这样做会触发经典的IE6双倍margin BUG,这样反而要投入额外的时间去调试IE6 的Hack。
虽然我们还可以通过display:inline来避开IE6的BUG,但我们仍然需要调整这些子框架间的间距,防止最后一个自框架被挤到下一行。