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，但我们如故必要调解这些子框架间的间距，防备最后一个自框架被挤到下一行。

改变子框架级别而且节制剩余的空缺

行使 float 和 margin 来让多个子框架居中而且中分父框架剩余空间的做法弱点许多。为了避开这些弱点，我们还可以行使另一种要领：把子框架的级别改为 inline-block ，而且通过 letter-spacing 属性 节制自框架之间的间距。

假设在一个父框架里有四个 block 级的子容器，每个子容器的巨细均为 100px x 100px。为了让这些子框架能分列在统一行内，我们可以把它们改为 inline-block 级，因为子框架和父框架之间并没有其余的内容，应此要节制子框架的空间分派将轻而易举。暂时假设父框架 id=parent，子框架 class=child，那么 CSS 可以这样写：

在这段样式里，#parent 的 text-align、letter-spacing、white-space、overflow 和 .child 的 vertical-align、display 这些属性是实现预想结果的要害，下面表明一下这些属性起了什么浸染。

• text-align：使 #parent 里的全部内容都居中
• letter-spacing：节制每个子框架之间的空缺巨细
• white-space: nowrap：防备最后一个子框架被挤到下一行
• overflow: hidden：潜匿超出 #parent 范畴的内容
• vertical-align: middle：使全部子框架都垂直居中
• display: inline-block：是全部子框架都分列在统一行，而且保持 block 级元素的特征

兼容 IE

在今时今天，老版本的 IE 赏识器已经成为网页计划师的心头大恨，固然上面的 CSS 能兼容 IE8，但因为 IE6 和 IE7 并不完全支持 inline-block 级元素，因此我们还必要写下面的一段 Hack，确保在 IE6 和 IE7 里能保持和当代赏识器同等的结果。

本文所举例子的最终结果可以看这个 DEMO。

跋文

本文所举的例子固然只有短短的两句 IE Hack，但在现实开拓中各人要写的 Hack 必定要多许多，因此裁减老版本 IE 的使命已经刻不容缓。我听过许多人说：“我不消 IE 赏识器的，我用傲游和天下之窗”，在这里我提示一下各人，对这些无法表明清晰的人，我们可以简朴地和他们说：“往往能用付出宝的赏识器都是落伍的，请放弃行使。”。

原文：http://blog.imbolo.com/center-multiple-divs-with-css/

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!