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-top类的padding-bottom和.main属性，而不是设置.inner类的上下边距。使用padding课程.inner和border课程.tile上的10px组合，将照片间隔.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; } 分开。

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

example

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

为每个浏览器宽度设置媒体查询，在此示例中，我只增加了800px，但您可以根据需要添加更多。

css（续）

.inner

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

如果要更改切片之间的间距，则需要更改padding类.inner上的margin-top，margin-bottom类上的.main，{ {1}}上的width和{{1}}以及每个媒体查询中指定的{{1}}。

Answer 2

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

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

Answer 3

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