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

Question

我试图获取一个父div标签来保存n个子div标签，这样它们都在同一条线上，但在中心组合在一起。例如：

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

以下是我尝试过的事情：

• 显示蓝色div：内联使它们在同一条线上。问题：即使宽度和高度都设置为10px也不显示。我尝试添加 ，但它只有几个像素宽。
• 使蓝色div浮动：左。问题：必须以编程方式将红色父级调整为子内容，因为div是浮动的，然后居中于其父级以获得我想要的内容。应该有一个不涉及javascript的解决方案。

Answer 1

对于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 2

<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 3

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

Answer 4

尝试使用display: inline-block;：

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

http://jsfiddle.net/mupuR/