2

为了详细描述这个问题，我必须做出一些假设：

  1. 我有一个项目列表，长度未知（可以是 1、2 甚至 50）
  2. 我想在网格中显示它们 - 行中的项目数是未知的（由用户的显示分辨率决定）。
  3. 每个项目的宽度都是相同的，并且固定为 250 像素。
  4. 项目间距应由显示分辨率确定，或者应缩小容器的宽度。
  5. 我不想使用 JS。

你可以在FoodGawker看到我想做什么。我正在使用 2 台不同分辨率的显示器。当将我的浏览器从一个拖放到另一个时，它只会将更多项目排成一行，但所有内容仍然居中且对称。它也适用于禁用 JS。

所以我知道这是可能的，但我不知道该怎么做。

我尝试了浮动：、显示：等的许多变体，但无法使其工作。

下面的代码最接近我想要的 - 适用于 2 个内部 div，但对于许多它不再居中。有任何想法吗？

.center_wrapper {
    background: grey;
    padding: 10px;
    text-align: left;
    overflow: hidden; 
    display:inline-block;
}

.cards_wrapper {
    background: red;
    overflow: hidden; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 90%;

}
.card {
    background: blue;
    width: 250px;
    height: 250px;
    margin: auto 20px;
    display:inline;
}


<div class="cards_wrapper">
    <div class="center_wrapper">
        <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
        <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
    </div>
</div>

在此处输入图像描述

10

4

2 回答 2

13

使用inline-block和 %margin

演示：http: //jsfiddle.net/MadLittleMods/9SZDC/

.block
{
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;

    width: 250px;
    height: 100px;
    background: #aaeeff;

    margin: 1%;
}​

如果要使块居中，则可以向容器添加文本对齐

.container
{
    text-align: center;
}
于 2012-11-20T21:54:30.070 回答
1

删除text-align: left;from.center_wrapper应该可以解决问题。

如此处所见。

于 2012-11-20T21:50:43.150 回答