如何将具有左对齐子元素和响应图像的容器居中？-css教程-PHP中文网

如何将具有左对齐子元素和响应图像的容器居中？

Patricia Arquette

发布： 2024-11-02 08:42:29

原创

872 人浏览过

How to Center a Container with Left-Aligned Child Elements and Responsive Images?

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

本题旨在在页面居中的容器中显示图像，其中图像组合在一起并一个接一个地显示。挑战在于保持图像之间的固定距离，同时适应不同的浏览器窗口宽度。

要使用 CSS 实现此布局，可以使用媒体查询根据视口大小调整包含图像的 div 的宽度。下面的代码演示了这种方法：

body { margin: 10px 0; }
.outer { text-align: center; }
.inner { 
  font-size: 0; /* fix for inline gaps */
  display: inline-block;
  text-align: left;
}
.item {
  font-size: 16px; /* reset font size */
  display: inline-block;
  margin: 5px; /* gutter */
}
.item img { vertical-align: top; }
@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; }
}

登录后复制

在 HTML 结构中：

<div class="outer">
  <div class="inner">
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
  </div>
</div>

登录后复制

此方法使用媒体查询在浏览器窗口大小调整时动态调整内部 div 的宽度。宽度是根据每个图像的大小以及图像之间所需的装订线来计算的。每行的图像数量会根据浏览器宽度自动变化。

需要注意的是，如果处理大量图像，建议优化代码以提高性能。此外，请考虑使用 Flexbox 或 CSS 预处理器以获得更灵活的解决方案。

以上是如何将具有左对齐子元素和响应图像的容器居中？的详细内容。更多信息请关注PHP中文网其他相关文章！