html - 如何使整个 float 元素块与其父容器的中心对齐？

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

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

最佳答案

这个问题的目的是破坏使用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>

关于html - 如何使整个 float 元素块与其父容器的中心对齐？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53282655/