左对齐时使内容居中答案

【问题标题】：Centering Content When Justified Left左对齐时使内容居中
【发布时间】：2019-04-07 01:59:42
【问题描述】：

我有一个包装器<main> 和包装器<div class="item> 内的一些物品。这些项目的宽度为 200 像素，高度为 300 像素。我希望这些项目左对齐，以便在屏幕变小时它们向左堆叠。但是在他们包装之后，我希望这些物品能够自行居中。

这是商品的图片。

当它们包装起来时，它们看起来像这样：

但我希望它们看起来像这样

但我不想使用text-align: center，因为我得到了这种格式

这是一个具有相同代码的代码笔： https://codepen.io/isaacweaver/pen/wQvBXY/

【问题讨论】：

添加您目前拥有的代码。
谢谢，我添加了一个代码笔，代码相同但没有标题。它也在这里：codepen.io/isaacweaver/pen/wQvBXY

标签： javascript html css

【解决方案1】：

假设您想为卡片使用设置宽度，您应该能够使用媒体查询来设置 <main> 元素的宽度。这将在缩小浏览器窗口时将卡片对齐到下一行（左对齐）。不需要text-align: center;。我在下面添加了一个 sn-p，希望能显示你所追求的 :)

body{
  background-color: #eee;
}

main{
margin: 0 auto;
text-align: center;
}

.item{
  width: 300px;
  height: 400px;
  background-color: white;
  display: inline-block;
  margin: 0px;
  transition: .5s;
}

.item:hover{
  transform: translateY(-2px);
  box-shadow: 0px 0px 39px 0px rgba(0, 0, 0, 0.44);
}

@media (min-width: 605px) {
  main {
    width: 605px;
    text-align: left;
  }
}

@media (min-width: 910px) {
  main {
    width: 910px;
  }
}

@media (min-width: 1517px) {
  main {
    width: 1517px;
  }
}

<html>
<body>
  <main>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </main> 
</body>
</html>

【讨论】：

【解决方案2】：

我了解您要执行的操作，但是仅使用纯 html 和 css 并没有一种可靠的方法来执行此操作。最好的方法是使用 flexbox，但是当浏览器窗口处于特定大小时，您还需要添加空 div 以确保它看起来正确。这将使用 javascript、一些数学和浏览器窗口宽度来完成。

【讨论】：