CSS 中心响应 DIV

Question

您在图 1 中看到的“图块”（白框）是对用户屏幕的响应。如果屏幕尺寸不够大，它会在右侧留下一个间隙。我想要做的是实现如图 2 所示的结果。这是我迄今为止针对这些特定元素的代码..

HTML：

<div class="main">
    <div class="inner">
        <div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div>
    </div>
</div>

CSS：

.main{
    width:100%;
    background: #000;
}

.main .inner{
    margin:10px;
    min-width: 140px;
    background: red;
}

.main .inner .tile{
    margin:10px;
    height: 120px;
    width: 120px;
    background: #fff;
    display: inline-block;
}

图片 1：

图片 2：

Answer 1

您可以使用媒体查询来设置.inner 类在各种浏览器宽度下的宽度，然后将margin-left 和margin-right 属性设置为auto 以使其居中。设置.main 类的padding-top 和padding-bottom 属性，而不是设置.inner 类的顶部和底部边距。在.inner 类上使用padding 和.tile 类上的border 的组合，以将磁贴均匀地隔开10px。

媒体查询详细说明：CSS media queries

example

css

.main{
    width: 100%;
    background: #000;
    padding-top: 10px;
    padding-bottom: 10px;
}

.main .inner{
    padding: 5px;
    font-size: 0px;
    display: table;
    margin-left: auto;
    margin-right: auto;
    background-color: red;
}

.main .inner .tile{
    margin: 0px;
    padding: 0px;
    border: 5px solid red;
    height: 120px;
    width: 120px;
    background: #fff;
    display: inline-block;
}

为每个浏览器宽度设置一个媒体查询，在这个例子中我只增加了 800 像素，但你可以根据需要添加更多。

css（续）

@media (min-width: 280px) {
    .main .inner{
        width: 130px;
    }
}

@media (min-width: 320px) {
    .main .inner{
        width: 260px;
    }
}

@media (min-width: 480px) {
    .main .inner{
        width: 390px;
    }
}

@media (min-width: 640px) {
    .main .inner{
        width: 520px;
    }
}

@media (min-width: 800px) {
    .main .inner{
        width: 780px;
    }
}

媒体查询用于将.inner 的宽度设置为130px 的倍数，即.tile 的宽度与10px 的边框。

如果您想更改图块之间的间距，您需要更改 .tile 类上的 border、.inner 类上的 padding、margin-top 和 margin-bottom .main 类和在每个媒体查询中指定的 width。

Answer 2

您可以为.inner 设置最大宽度，然后为.main 设置text-align: center

Answer 3

   .main .inner{
  min-width: 140px;
    background: red;
    text-align:center;
    }

添加 text-align:center css 属性http://jsfiddle.net/dolours/afKgg/