在另一个Div标签的中心Div标签

Question

我想获得一个父div标签来容纳n个儿童div标签，使它们都在同一行上，但在中心组合在一起。例如：

这里的孩子是蓝色的，而父母是红色的。

这里是我试过的东西：

• 使蓝色的div显示：内联，让他们在同一行。问题：即使其宽度和高度均设置为10px，也不会显示。我尝试添加 ，但它只有几个像素宽。
• 制作蓝色浮雕：左。问题：必须以编程方式将红色父项调整为子内容，因为div浮动，然后居中其父项以获取我想要的内容。应该有一个解决方案，不涉及JavaScript。

Answer 1

<style> 
.container { 
    width: 100%; 
    padding: 0; 
    text-align: center; 
    border: 1px solid red; 
} 

.inner { 
    display: inline-block; 
    margin: 0 5px; 
    border: 1px solid blue; 
} 
</style> 

<div class="container"> 
    <div class="inner"> 
    one 
    </div> 
    <div class="inner"> 
    two 
    </div> 
    <div class="inner"> 
    three 
    </div> 
</div> 

Answer 2

将蓝色的div贴在容器格中。找到它们的宽度（包括边距和填充）并将容器分配给该宽度。然后将容器div的边距设置为0 auto，将它粘在红色的div中，你应该没问题。

Answer 3

对于IE6和IE7的兼容性，你可能必须添加zoom:1;和*display:inline;你的孩子CSS

jsFiddle

.parent {width:100%;border:1px solid red;text-align:center;} 
.child {width:15%;display:inline-block;border:1px solid blue;} 

Answer 4

尝试使用display: inline-block;：

.child { 
    display: inline-block; 
    ... 
} 

http://jsfiddle.net/mupuR/