css - 在另一个 div 标签中居中 div 标签

Question

我试图让一个父 div 标签来保存 n 个子 div 标签，使它们都在同一行，但在中心组合在一起。例如：

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

以下是我尝试过的事情：

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

Answer 1

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

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/