Question

我正在尝试创建类似于图库的内容，根据浏览器的宽度显示每行不同数量的图像。使用外部div中的overflow: hidden和内部div中的float: left已经实现了这一点。

然而，这会发生的是我的图像始终与左边对齐，在右边留下了很多空白。如何使画廊始终在屏幕中居中，无论每行有多少图像。

非常感谢你。：）

Answer 1

<强> HTML

<div class="container">
  <div class="red box">red</div>
  <div class="blue box">blue</div>
  <div class="black box">black</div>
</div>

<强> CSS

body{
  text-align:center; /*You would need to define this in a parent of .container*/
}
.container{
  display: inline-block;
  margin: 0 auto;
  text-align: left;
}
.box {
  width: 300px;
  height: 300px;
  float: left;
}

Answer 2

Demonstration

您需要在主div上使用id（或类）。设置width: 300+px and margin: auto 你的盒子也应该是display: inline-block，以允许它们“内联” 为了更好的可见性，我已经改变了盒子的颜色。

CSS - 将包装的浮动div对齐到中心

2 个答案: