Question

我有一个包装器for (int i = 0; i < 5; i++) { a[i] = new int[5]; // these 5 pointers again point to an array of 5 integers } // in the end, you have a 5x5 array.和包装器<main>中有一些物品。这些项目的宽度为200像素，高度为300像素。我希望这些项目保持对齐，以便它们在屏幕变小时向左堆叠。但是在他们包裹好之后，我希望物品能居中放置。

这是物品的图片。 Items Overview

当它们包装时，它们如下所示： Wrapped Items left justified but not centered

但是我希望他们看起来像这样 Wrapped Items and Centered

但是我不想使用<div class="item>，因为这样我就得到了这种格式 Center Justified and Centered

这是一个具有相同代码的Codepen： Android 8: Cleartext HTTP traffic not permitted

Answer 1

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

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>

Answer 2

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

左对齐时居中内容

2 个答案: