如何使用CSS将n列居中？

I currently have the following CSS for my 4 columns which might grow to 5 or 6 in the future:

我目前在我的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>

Is it possible to use what I have to centre all 4 columns in the middle of the page?

是否可以使用我所拥有的中心页面中间的所有4列?

3 个解决方案

#1

You're going to have to set a static width on .columns:

您将不得不在.columns上设置静态宽度:

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

You'll probably want to put a clearing div at the bottom of the document (after .columns) as well:

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

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

Just to stretch out the .columns container (so your border goes the length of the columns).

只是伸出.columns容器(所以你的边框是列的长度)。

UPDATE

If you're trying to strictly make a four column layout, then update .columns div as such:

如果您正在尝试严格制作四列布局,请更新.columns div:

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

The only real secret here is to take the total width of the container and divide by four. In the case I provide, 800/4 = 200 so each column has a total width (width + padding + margins) of 200px;

这里唯一真正的秘密是取容器的总宽度除以4。在我提供的情况下,800/4 = 200,因此每列的总宽度(宽度+填充+边距)为200px;

#2

well, TECHNICALLY yes, but it requires you to set a width at some point, probably on your wrapper div. i don't know if it's possible to center dynamically-widthed (ie, 20% width) floated columns. if you set your wrapper div width to something, then you can set margins on your other columns to center them

好吧,技术上是的,但它需要你设置一个宽度,可能在你的包装div上。我不知道是否有可能以动态宽度(即20%宽度)浮动列为中心。如果将包装器div宽度设置为某个值,则可以在其他列上设置边距以使其居中

#3

I think I got something workable after reading all the possible answers with minimum amount of hard-coded calculated values. I've taken out the borders for simplicity:

我认为在用尽可能少的硬编码计算值读取所有可能的答案后,我得到了一些可行的东西。为简单起见,我已经取出了边框:

.columns {
    position: relative;
    clear: both;
    margin: 0 auto;
    width: 900px;
}

.columns div {
    position: relative;
    float: left;
    width: 22%;
    overflow:hidden;
    margin-right: 4%;
}

.columns div.last {
    margin-right: 0;
}

Use <div class="last"> in the last column.

在最后一列中使用

。

#1