CSS多个子框架居中

时间：2016.05.08 发布人：XNYSX
CSS多个子框架居中

已解决问题

谷歌XNYSX用户在2016.05.08提交了关于“独步天下CSS多个子框架居中”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-02-27T11:35:05。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，谢了,下次有事儿别忘了找我 ！

希望以下的回答，能够帮助你。

第1个回答

用户名：x**jsa  

有时我们需要令一个宽度固定的容器里的子框架居中（例如一个Div，或者其他block级元素），如**框架只有一个的话，我们只需要为子框架加上CSS属性margin：auto就可以了。

但如果我们问答要让多个子框架居中，并且等分父框架剩余的空间的话，我们对所有子框架使用CSSbox-align：center来实现这种效果。

可是为依达元些吧其跑目前还有相祷部分主流浏览器不支持box-align属性，那么我们应该如何编写CSS，使这种效果能兼容大部分的浏览器呢？

通常的方法

为了使多个block级元素排列在同一行里，我们习惯使用fl量选斤注从oat属性使子框架浮动，然后利用margin属性让每一个鲁整标格显细显罪了子框架之间都留出一些空白的间距。可是这样做会触发经典的IE6双倍marginBUG，这样反而要投入额苦染虽起重上民外的时间去调试IE6的h**ack。

虽然我们还可以通过display：inline来避开IE6的BUG肥府核哪才互游知束基仅，但我们仍然需要调整这些子框架间的间距，防止最后一个自框架被挤到下一行。

改变子框架级别并且控制剩余的空白

使用float连盐和margin来让多个子框架居中并且等分父框架剩余空间的做法缺点很多。为了避开这些缺点，我们还可以使用另一种方法：把子框架的级别改为inline-block，并且通过letter-spacing属性控制自框架之间的间距。

假设在一个父框架里有四个block级的神至你吗元亲子容器，每个子容器的大小均为100pxx100px。为了让这些子框架能排列在同一行内，我们可以它把它们改为inline-block级，由于子框架和父框架之间并没有其它的内容，应此要控制子框架的空间分配将易如反掌。姑且假设父框架id=parent，子框架class=child，那么CSS可以这样写持：

以下为引用的内容：

#parent{width:61**x;border:solid1px#aaa;text-align:center;font-size:20px;letter-spacing:3**x;whitewhite-space:nowrap;line-height:12px;overflow:hidden;}.child{width:100px;height:100p重低期发哥今制便x;border:solid1px#ccc;display:inline-block;vertical-align:middle;}

在这段样式里，#parent的text-align、letter-spacing、white-space夜顶放素较谓措而、overflow和.child的vertical-align、display这些属性是实现预想效果的关键，下面解释一下这些属性起了鲜伟快文析独脱丰什么作用。

text-align：使#parent里的所有内容都居中

letter-spacing：控制每个子框架之间的空白大小

white-space:nowrap：防止最后一个子框架言创夫威被挤到下一行

overflow:hidden：隐藏超出#parent范围的内容

vertical-alig星文出我后乎础跑剂卷序n:middle：使所有子框架都垂直居中

display:inline-block：是所有子框架都排列在同一行，并且保持block级元素的特性

兼容IE

在今时今日，老版本的IE浏览器已经成为网页设计师的心头大恨，虽然上面的CSS能兼容IE8，但由于IE6和IE7并不完全支持inline-block级元素食曾丝判毛革措加亮，因此我们还需要写下面的一段h**ack，确保在IE6和IE7里能保持和现代浏览器一致的效果。

以下为引用的内容：

.child{*display:inline;*margin:020px020px;}

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

后记

本文所举的例子界审渐结否冲越呀易虽然只有短短的两句IEh**ack，但在实际开发中大家要写的h**ack肯定要多很多，因此淘汰老版本IE的任务已经刻不容缓。我听过很多人说：“我不用IE浏览器的，我用傲游手和世界之窗”，在这里我提醒一下大家，对这些无法解释清楚的人，我们可以简单地和他们说：“凡是能用支付宝的浏览器都是落后的，请放弃使用。”。