Html 将页面中的元素列表居中

我希望将一个页面中的元素列表居中，而无需重新确定元素的尺寸，同时尽可能多地放在同一行中。 我为每个屏幕大小使用了几个@media规则，从每行1个元素到4个元素，但我想知道是否有一种方法可以满足页面宽度的要求。 以下是我尝试过并成功的方法：

.container{
显示器：flex；
宽度：最大含量；
柔性包装：包装；
弯曲方向：行；
左边距：自动；
右边距：自动；
}
@仅介质屏幕和（最小宽度：294px）{.container{
宽度：290px；
}}
@仅介质屏幕和（最小宽度：584px）{.container{
宽度：580px；
}}
@仅介质屏幕和（最小宽度：874px）{.container{
宽度：870px；
}}
@仅介质屏幕和（最小宽度：1164px）{.container{
宽度：1160px；
}}
.矩形{
宽度：286px；
高度：180像素；
右边距：2px；
左边距：2倍；
边缘底部：24px；
背景：#aeaeae；
}

---

如果我理解正确，您希望将所有适合一行的项目居中-然后您可以使用

调整内容

替换媒体查询

---

我想做的是设置

text align:center，在您的案例中为.container。然后，对于要居中的元素，将显示属性设置为
display:inline block（.矩形在您的案例中）。这将把尽可能多的元素放在一行上。任何不适合下一个的，仍然居中。调整窗口大小时，元素会根据需要向下移动到下一行

将css更改为：

    .rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
  display: inline-block
}
   .container {
  /*display: flex;
  width: max-content;*/
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

您需要注释掉.container中的前两行，以使其正常工作。希望这对你有用

编辑：我原以为您希望元素居中。现在我不确定。如果希望后续行中的元素像代码片段中一样左对齐，请更改
text align:center到
文本对齐：左


.rectangle{
宽度：286px；
高度：180像素；
右边距：2px；
左边距：2倍；
边缘底部：24px；
背景：#aeaeae；
显示：内联块；
}
.集装箱{
/*显示器：flex；
宽度：最大含量*/
柔性包装：包装；
弯曲方向：行；
左边距：自动；
右边距：自动；
文本对齐：居中；
}


.container{
显示器：flex；
宽度：最大含量；
柔性包装：包装；
弯曲方向：行；
左边距：自动；
右边距：自动；
}
@仅介质屏幕和（最小宽度：294px）{.container{
宽度：290px；
}}
@仅介质屏幕和（最小宽度：584px）{.container{
宽度：580px；
}}
@仅介质屏幕和（最小宽度：874px）{.container{
宽度：870px；
}}
@仅介质屏幕和（最小宽度：1164px）{.container{
宽度：1160px；
}}
.矩形{
宽度：286px；
高度：180像素；
右边距：2px；
左边距：2倍；
边缘底部：24px；
背景：#aeaeae；
}
是的，您可以通过各种方式实现，而无需针对媒体查询。以下是一个例子：
让我们在另一个
div

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

以下是
我查看了您的代码片段，我同意它是有效的。您是否试图避免编写媒体查询以获得相同的结果？你需要js。你的问题不清楚，你到底想要实现什么？我正试图做与代码片段中相同的事情，但没有媒体查询，因此无论宽度如何，它都可以工作。我真的需要js吗？我的意思是这不是一个问题，但我认为有一种方法我不知道完全使用cssJs是不是强制性的，好吧，你想要一行4个块&块的其余部分将转到下一行？我认为这个问题对于新用户来说写得很好，甚至包括一个片段，而且非常清楚。干得好。我的内容几乎完成了我想要的工作。唯一的问题是底部元素也居中，因此当最后一行的元素较少时，它们与其他元素没有很好的对齐。那么您应该添加一个符合您需要的
flex basis
值@sleiphirI抱歉，但我不明白如何使用flex basis将元素向左对齐在列表上，在保持列表在页面中心的同时，我尝试将列表居中，但将列表中的元素向左对齐。问题是，如果我将text align:left放在列表中，则列表不再居中
<div class="container">
  <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
</div>

*{
  box-sizing: border-box;
}
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container > div{
 width: 25%; float: left; padding-right: 5px; margin-bottom: 24px; height: 180px;  
}
.container > div::nth-child(4){
  padding-right: 0;
}
.rectangle{background: green; height: 180px; }