Question

我有这个HTML：

<div id="container">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
</div>

和这个CSS：

#container {
    overflow: hidden
}

article {
    float:left;
    height: 200px;
    width: 200px;
    background-color: red;
    margin: 5px;
}

我想在不指定宽度的情况下居中#container。有可能吗？
这是Fiddle。

编辑：我需要改变#container的宽度以适应文章。如果主体宽度为450px，则每行将有两个文章，因此容器的宽度应为400px aprox。如果主体宽度为1100px，则每行将有5个物品，因此容器的宽度应为1000px aprox。

Answer 1

您可以尝试这样的事情（jsfiddle）：

HTML：

<html>
    <body>
        <div id="container">
            <article></article>
            <article></article>
            <article></article>
            <article></article>
            <article></article>
        </div>
    </body>
</html>

CSS：

html, body { margin: 0; padding: 0; }
body { text-align: center; }

#container {
    overflow: hidden;
    margin: 0 auto;
    width: 90%;
    text-align: left;
}

article {
    display:inline-block;
    height: 200px;
    width: 200px;
    background-color: red;
    margin: 5px;
}

Answer 2

更新2015

我注意到之前的设置存在轻微问题。因为保持第一个占位符内的文章可以使利润率翻倍。在每个文章包装点调整页面大小时，这会导致轻微的不一致。

这个更新的小提琴摆脱了这些问题：

http://jsfiddle.net/C4fbX/4/

然而，如今这种布局很可能通过Flexbox以更好的方式实现。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

回答了2012年

以下方法有效，但有点疯狂。令人讨厌的是，这不是CSS可以轻松处理的事情：

拨弄

http://jsfiddle.net/C4fbX/

方法

此方法适用于Nick发布的基本思想，并使用此方法然后定位左浮动系统...这解决了问题，即您总是在居中容器中使用中心对齐元素。

所以而不是：

[][][][]
  [][]

你得到：

[][][][]
[][]

需要以下规定：

您需要包含与文章一样多的占位符元素。该方法使用这些来计算从中缩进文章的位置。这也意味着占位符元素的宽度和水平边距/填充必须与文章的宽度和水平边距/填充匹配。
文章需要放在第一个占位符中。
为了解决与inline-block相关的空白问题，font-size和line-height被清零，这意味着必须为文章再次手动设置它们。你可以通过从css中删除这些归零属性来解决这个问题，并确保你的占位符标记没有任何空格。
我非常怀疑这可以在旧版浏览器中使用 - 但似乎在当前的现代浏览器中。
依靠绝对位置意味着您的文章不会占用文档中的通常空间，因此您必须在设计中考虑到这一点或在#container元素上设置固定的高度

标记

<div class="container">
  <div class="placeholder">
    <div class="position">
      <article>a</article>
      <article>b</article>
      <article>c</article>    
      <article>d</article>
      <article>e</article>
    </div>
  </div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
</div>

<强> CSS

.container {
  font-size: 0;
  line-height: 0;
  text-align: center;
}

.placeholder {
  display: inline-block;
  width: 200px;
  margin-left: 5px;
  margin-right: 5px;
  height: 0px;
}

.position {
  position: absolute;
}

article {
 font-size: 12pt;
 line-height: 1.2em;
 float: left;
 margin: 5px;
 width: 200px;
 height: 100px;
 background: red;    
}

Answer 3

您的意思是将物品放在容器中心，同时让它们仍然包裹？在这种情况下（jsfiddle）：

#container {
    text-align: center;
}

article {
    display:inline-block;
    height: 200px;
    width: 200px;
    background-color: red;
    margin: 5px;
}

Answer 4

在考虑了几个选项后，我发现使用媒体查询是更简单的方法。

在这种情况下，它将是这样的：

@media (max-width: 420px) {
    #container {
        width: 210px;
    }
}

@media (min-width: 420px) and (max-width: 630px) {
    #container {
        width: 420px;
    }
}

@media (min-width: 630px){
    #container {
        width: 630px;
    }
}

这是fiddle。

Answer 5

取出float: left;并添加margin:auto;

中心浮动容器没有宽度

5 个答案:

更新2015

回答了2012年

拨弄

方法