如何使一个div在居中的div内左/右浮动

Question

当我想要将子div浮动到居中的父div的左侧或右侧时，整个设计会向左或向右移动，具体取决于浮动方向。那么，如何使子div浮动并使居中的父div保持在中心位置呢？

HTML:

<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>

CSS（层叠样式表）：

#parent{
    padding: 0 auto;
    width: 600px;
}
#child-left{
    float: left;
    width: 300px;
}
#child-right{
    float: right;
    width: 300px;
}

为什么父级容器会向左或向右偏移，而不保持居中？如何使其始终居中？

- 123dcck

---

你是如何让 #parent div 居中的？无论是否使用浮动，都没有任何东西可以使 #parent 居中。 - My Head Hurts

我已经为 margin-right 和 margin-left:auto 进行了设置。 - 123dcck

在#parent内部吗？如果是这样，您的代码应该可以正常工作（请参见此处）。也许您可以为我们创建一个例子 JsFiddle - 或者随意 编辑我的 - 以重现问题。 - My Head Hurts

你说得对，这是因为我一开始没有设置父级 div 的宽度，而是将其保留为 width:auto。谢谢。 - 123dcck

Answer 1

看演示

#parent{
    padding: 0px, auto;
    width: 605px;
  height:200px;
  border:solid 1px #f00;
}
#child-left{
  float: left;
  width: 300px;
  height:200px;
  border:solid 1px #0F0;
}
#child-right{
    float: right;
    width: 300px;
   height:200px;
  border:solid 1px #00F;
}

- GajendraSinghParihar

---

我有点困惑...这不会使#parent元素居中，而答案中链接的示例却显示了如何居中。为什么这个回答被接受了呢？如果这解决了你的问题，那么我认为你需要修改你的问题，以避免让未来的访问者感到困惑。 - My Head Hurts

Answer 2

对于父级div，您可以使用以下CSS代码

margin:0 auto;
width:980px;

对于子元素，您可以使用以下代码进行浮动：

float:right or left;
width:anypx;

best regards

- Saeed

---

我也喜欢这样做，但在某些情况下，父级div会浮动到左侧/右侧，尽管它应该保持居中。 - 123dcck

你可以使用以下样式来设置父元素：float:none; - Saeed

Answer 3

使用margin: 0 auto;将父元素居中对齐。

#parent{
    margin: 0 auto;
    width: 600px;
}

你的代码中也有很多拼写错误（chile而不是child），以及缺少>符号，请在继续之前修复它们

一个可用的JSFiddle（点击我）

- Andy