div的响应居中

Question

我该如何从这里开始

到这里

我正在尝试将内部 div 的父项居中，除了最后一行，我想将其左对齐到它上面的行。

这是顶部图片的 jsfiddle https://jsfiddle.net/L15p2nev

.container {
  text-align: center;
  background-color: green;
}

.item {
  display: inline-block;
  width: 300px;
  background-color: red;
}

<div class="container">
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
</div>

Answer 1

使用grid显示布局，可以存档。

您可以设置 grid-template-columns: repeat(auto-fit, 300px) 将项目对齐为图像。

.container {
  background-color: green;
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: center;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item {
  display: inline-block;
  background-color: red;
}

<div class="container">
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
</div>

div的响应居中

Responsive centering of divs

css

responsive