css - 如何使用 CSS 将 n 列居中？

Question

我目前的 4 列有以下 CSS，将来可能会增加到 5 或 6:

<style>
.columns {
    margin: 0 auto;
    border: 1px red dotted;
    width: 90%;
}

.columns div {
    float: left;
    width: 20%;
    overflow:hidden;
    border: solid 1px;
    margin-right: 1em;
}
</style>

<div class="columns">
  <div>
    <h3>First</h3>
    <ul>
      <li>left</li>
    </ul>
  </div>
  <div>
    <h3>Second</h3>
    <ul>
      <li>mid</li>
    </ul>
  </div>
  <div>
    <h3>Third</h3>
    <ul>
      <li>right</li>
    </ul>
  </div>
  <div>
    <h3>Fourth</h3>
    <ul>
      <li>far right</li>
    </ul>
  </div>
</div>

是否可以使用我必须将所有 4 列居中放置在页面中间？

Answer 1

您将必须在 .columns 上设置静态宽度:

.columns {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    border: 1px red dotted;
}

您可能还想在文档底部(.columns 之后)放置一个清除 div:

<div style="clear: both;">&nbsp;</div>

只是为了拉伸(stretch) .columns 容器(这样你的边框就和列的长度一样)。

更新

如果您尝试严格制作四列布局，则更新 .columns div:

.columns div {
    width: 160px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

这里唯一真正的 secret 是将容器的总宽度除以四。在我提供的情况下，800/4 = 200 因此每列的总宽度(宽度 + 填充 + 边距)为 200 像素；