Question

在此示例中。红色项目全部粘在其黄色容器的左侧。我该怎么做才能使它们停留在父容器的中间，以便黄色可以同时出现在左侧和右侧（现在只有右侧）

.item {
  background:red;
  float:left;
  width:26%
}

#container {
width:600px;
background:#ff0;
overflow: auto;
}

<div id="container">

  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
</div>

Answer 1

这个问题的目的破坏了使用float的目的。

float CSS属性指定元素应沿其容器的左侧或右侧放置，以允许文本和内联元素环绕在其周围。该元素已从网页的常规流程中删除，尽管仍保留一部分流量

MDN - float

相反，您可以使用display:flex来布局项目，并使用justify-content: center来使它们居中。

.item {
  background: red;
  flex: 0 1 25%;
}

#container {
  width: 600px;
  background: #ff0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

<div id="container">

  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
</div>

或者如果您不能使用flex（也许您需要支持IE9，谁知道的话），而是将display:inline-block与text-align: center一起使用

.item {
  background: red;
  display: inline-block;
  width: 25%;
}

#container {
  width: 600px;
  background: #ff0;
  text-align: center;
}

<div id="container">

  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
  <div class="item"> Item </div>
</div>

Answer 2

添加一些填充：

<php>
  <server name="REMOTE_ADDR" value="127.0.0.1"/>
</php>

.item {
  background: red;
  float: left;
  width: 33%
}

#container {
  width: 600px;
  background: #ff0;
  margin: auto;
  overflow:auto;
  padding: 0 90px;
  box-sizing:border-box;
}

如何使整个浮动元素块与其父容器的中心对齐？

2 个答案: