1

我有这个 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居中。是否可以？
这是小提琴。

编辑：我需要更改#container 的宽度以适应文章。如果 body 是 450px 宽度，那么每行会有两篇文章，所以容器的宽度应该是 400px aprox。如果 body 是 1100px 宽度，那么每行将有 5 篇文章，所以容器的宽度应该是 1000px aprox。

4

5 回答 5

4

你可以尝试这样的事情（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;
}
​
于 2012-12-21T23:29:03.603 回答
4

2015 年更新

我注意到以前的设置有一个小问题。将文章保留在第一个占位符内会使边距增加一倍。这导致在跨每个文章换行点调整页面大小时出现轻微的不一致。

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

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

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

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


回答 2012

以下方法有效，但有点疯狂。很烦人的是，这不是 CSS 可以轻松处理的：

小提琴

http://jsfiddle.net/C4fbX/

方法

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

所以而不是：

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

你得到：

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

需要以下规定：

  1. 您需要包含与文章一样多的占位符元素。该方法使用这些来计算从哪里缩进文章。这也意味着占位符元素的宽度和水平边距/填充必须与文章的匹配。
  2. 文章需要放在第一个占位符内。
  3. 为了解决与 相关的空白问题inline-block，font-size和line-height被清零，这意味着必须为文章再次手动设置它们。您可以通过从 css 中删除这些归零属性并确保您的占位符标记没有任何空格来解决此问题。
  4. 我非常怀疑这是否适用于旧版浏览器 - 但似乎适用于当前的现代浏览器。
  5. 依赖绝对位置意味着您的文章不会占用文档中通常的空间，因此您必须在设计中考虑到这一点或在#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;    
}
于 2012-12-22T01:25:55.457 回答
1

您是指将物品放在容器中的中心，同时让它们仍然可以包装吗？在这种情况下（jsfiddle）：

#container {
    text-align: center;
}

article {
    display:inline-block;
    height: 200px;
    width: 200px;
    background-color: red;
    margin: 5px;
}
​
于 2012-12-22T00:39:33.073 回答
1

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

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

@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;
    }
}

这是小提琴。

于 2012-12-31T02:52:17.683 回答
0

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

于 2012-12-21T23:22:06.143 回答