css - 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使其居中。设置类的padding-topandpadding-bottom属性，.main而不是设置类的上下边距.inner。使用paddingon .innerclass 和borderon .tileclass 的组合将瓷砖均匀地10px分开。

有关媒体查询的详细说明：CSS 媒体查询

例子

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带有边框的a 的宽度10px。

如果要更改图块之间的间距，则需要更改类border上的 、类上的 、类上的以及每个媒体查询中指定的 。.tilepadding.innermargin-topmargin-bottom.mainwidth

Answer 2

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

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

Answer 3

你可以设置 max-width for.inner然后有text-align: centerfor.main