如何将内联块项目列表居中，同时将列表内容向左对齐？答案

【问题标题】：How to Center a list of inline-block items, while aligning the content of the list to the Left?如何将内联块项目列表居中，同时将列表内容向左对齐？
【发布时间】：2020-04-10 00:36:34
【问题描述】：

我在父元素中有一个 inline-block 元素列表。我不会在保持子元素向左对齐的同时将父元素居中。

<body>
  <style>
  /* the width of the container is dynamic by the width of the window */
  .container {
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  /* i don't know the width of the list element, it's only for centering */
  .list {
    text-align: left;
  }
  /* the width of the item is const - always 200px */
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
  }
  </style>
  <div class="container">
    <div class="list">          
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>       
    </div>
  </div>
</body>

正如您在所附示例中所见，list 元素未居中。
如果我删除 align: left 样式，则 list 元素将居中，但 item 元素也将居中（我希望它们与左侧对齐）

这就是我想要实现的目标：

【问题讨论】：

检查这个：stackoverflow.com/a/50718701/8620333

标签： css center text-align

【解决方案1】：

像这样的东西只是给 text-align: left;项目和删除 text-align: center;来自列表

<body>
  <style>
  .container {
    width: 600px;
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
	 text-align: left;
  }
  </style>
  <div class="container">
    <div class="list">          
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>        
    </div>
  </div>
</body>

【讨论】：

这并不能解决问题！您可以看到最后一项居中，而问题询问如何在项目向左对齐时将列表居中

【解决方案2】：

使所有items 适合list 的宽度，方法是为list 设置一个固定宽度或编辑item 的宽度，使其小于list 的50%，@987654326 @ 工作得很好

.container {
   width: 600px;
   height: 900px;
   border: 1px solid red;
   overflow-y: auto;
}

.list {
   border: 1px solid #bbb;
   width: 445px;
   margin: 0px auto;
}

.item {
   text-align: left;
   display: inline-block;
   width: 200px;
   height: 200px;
   margin: 10px;
   background: gray;
}

<body>
  <div class="container">
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </div>
</body>

【讨论】：

我不知道list 元素的宽度。它仅用于居中。 item 元素具有静态宽度，而外部 container 将随窗口调整大小。如果是宽屏，则连续显示 2 个以上的项目。
因为container 有一个固定的宽度，它的子级将继承相同的宽度，浏览器默认将其定义为父级的100%。所以list 的宽度将与container 相同。

【解决方案3】：

你真正想要达到什么目的？

现在你有 .container 和 .list 都是 600px 宽，所以你看不到列表元素是左对齐还是居中对齐。

首先，.list 和 .container 的宽度应该不同。那么您的列表应该是一个inline-block 元素，以便它对text-align: center 做出反应。

我为您制作了一个代码笔，以便更清楚地说明这一点：https://codepen.io/leo-melin/pen/MWYbLLa

.container {
    width: 800px;
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  .list {
    display: inline-block;
    width: 500px;
    border: solid 1px #000; /* Added border to make it visual */
    text-align: left;
  }
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
  }

更新 1

如果我现在对您的理解正确，那么您每行都有 n 个元素，它们都是 200 像素宽，如果没有足够的空间容纳另一个 200 像素的元素，您希望将它们居中放在容器中。您希望最后一项在容器内左对齐。

就像在另一个 stackoverflow 答案中一样：https://stackoverflow.com/a/40936683/2061685 您可能需要利用 flexbox 才能使该行为起作用。

所以这样的事情会做：

<div class="container">
    <div class="list">          
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
      <div class="item phantom"></div>
    </div>
  </div>

.container {
  width: 100%;
  height: 600px;
  border: 1px solid red;
  overflow-y: auto;
  text-align: center;
}

.list {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
}

.list:after {
  content: '';
  flex: auto;
}

.item {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 10px;
  background: gray;
}

.item.phantom {
  visibility: hidden;
  height: 0;
}

工作代码笔：https://codepen.io/leo-melin/pen/gObgLrX

如您所见，您需要添加这些幻像项以使最后一个元素保持在左侧。在只有几个项目的非常宽的屏幕上，您需要控制幻像元素的数量。在渲染项目时使用媒体查询或定义算法，以确保它在所有情况下都能正常工作。

希望这对您现在找到解决方案有所帮助。

【讨论】：

容器元素将根据窗口大小调整大小。列表元素仅用于居中。我不知道列表元素的宽度 - 这取决于它在 x 轴上包含多少项目元素。
那我不明白你的问题。在您的代码中，您的容器元素不会根据窗口大小调整大小，它固定为 600 像素。此外，您的列表元素没有定义大小，它的宽度也不取决于它包含多少项目元素：它是容器元素的 100%。请提供使容器元素调整大小的缺失代码并更好地解释您的问题。
我已经更新了问题并添加了一张图片，希望现在会更清楚
更新了我的答案