如何使用媒体查询将容器居中并使子元素左对齐？

居中对齐容器并左对齐子元素

在这种情况下，您有多个尺寸相同的图像，想要显示在网页。您的目标是将它们一个接一个地分组在页面的中心，并且它们之间的距离固定。

给定的 CSS 代码尝试使用 text-align: center 将容器在页面中居中，但它没有解决子图像的对齐问题。结果是图像线性显示，没有任何居中或固定间距。

更全面的解决方案需要考虑多个视口大小并应用媒体查询为包含图像的内部 div 设置适当的宽度。代码如下：

<code class="css">/* Set parent container to be centered */
.outer {
  text-align: center;
}

/* Set inner div to be inline-block for wrapping child elements */
.inner {
  font-size: 0; /* To prevent inline gaps between divs */
  display: inline-block;
  text-align: left;
}

/* Define the individual image elements */
.item {
  font-size: 16px; /* Reset font size */
  display: inline-block;
  margin: 5px; /* Gutter */
}

/* Image alignment within item divs */
.item img {
  vertical-align: top;
}

/* Media queries for different viewport sizes */
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
  .inner {
    width: 440px; /* (100+5+5)x4 */
  }
}

@media (max-width: 441px) {
  .inner {
    width: 330px;
  }
}

@media (max-width: 331px) {
  .inner {
    width: 220px;
  }
}

@media (max-width: 221px) {
  .inner {
    width: 110px;
  }
}</code>

通过根据视口大小调整内部 div 的宽度，您可以实现居中图像的所需布局，并根据需要进行包装以适应可用空间。请注意，这种方法对于大量图像可能不是最佳的，因为它涉及多个媒体查询。

以上是如何使用媒体查询将容器居中并使子元素左对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！