CSS中心响应部门

您在图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>

.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:

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

图2:

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

---

添加文本对齐：居中css属性

您可以为

设置最大宽度。内部

然后为

设置
文本对齐：居中
。main

您可以通过媒体查询来设置

。内部

类在不同浏览器宽度下的宽度，然后将

marginleft

和

marginright

属性设置为

auto

以使其居中。设置

.main

类的

padding top

和

padding bottom

属性，而不是在

.internal

类上设置上下边距。在

.internal

类上使用

填充

，在

平铺

类上使用

边框

组合，以将平铺均匀隔开

10px

有关媒体查询的详细说明，请参见：

css

.main{
宽度：100%；
背景：#000；
填充顶部：10px；
垫底：10px；
}
.main.内部{
填充物：5px；
字体大小：0px；
显示：表格；
左边距：自动；
右边距：自动；
背景色：红色；
}
.main.内部.瓷砖{
边际：0px；
填充：0px；
边框：5px纯红；
高度：120px；
宽度：120px；
背景：#fff；
显示：内联块；
}

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

css（续）

媒体查询用于将

.internal

的宽度设置为

130px

的倍数，这是边框为

10px

的

.tile

的宽度

---

如果要更改平铺之间的间距，则需要更改

.tile

类上的

边框

，以及

内部

类上的

填充

，

.main

类上的

页边距顶部

和

页边距底部

，以及在每个媒体查询中指定的

宽度

。

有没有办法使最后一行左对齐？有没有办法使最后一行左对齐？这可能是目前唯一可用的CSS解决方案，使用介质查询根据浏览器宽度选择不同的布置格线。我认为要么是这样，要么是JavaScript。目前单个布局网格无法支持这一点。有关原因的解释，请参阅。但是多个不同大小的布局网格可以支持它，如@axrwkr所建议的，使用媒体查询根据屏幕大小选择正确的布局网格。