Question

我有一个带有规则的对象数组

{width:10%, float:left,display:block;height:20px}

如果我有10个对象，它将一行显示一行，所以很好。我的问题是，如果我打印少于4个对象，我想在页面的中心显示它们，而不是向左浮动....在另一种情况下，如果我有例如33个对象，我想显示3个完整的行与左浮动对象，10行一行......最后一行有3个对象必须在中心页面上对齐。有任何建议如何用css解决这个问题？

谢谢

Answer 1

我想我会明白你想要做什么，这可以通过flex很好地实现。看一下这个演示

＆＃13;

  you have selected Social Media

＆＃13;

.container {
  border: 1px red solid;
  width:408px;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  border: 1px solid blue;
  width:100px;
  height: 100px;
}

＆＃13;

Answer 2

在DIV和中心文字

上创建一个包装器

.wrapper {
  text-align: center;
}

然后将inline-block用于您的DIV项目以实现所需的目标......

.wrapper div {
  width:10%;
  display:inline-block;
  height:20px;
  background: #ff0000;
  border: 1px solid #fff;
  }

.wrapper {
  text-align: center;
}
.wrapper div {
  width:10%;
  display:inline-block;
  height:20px;
  background: #ff0000;
  border: 1px solid #fff;
  }

<h1>4 divs</h1>
<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<h1>33 divs</h1>
<div class="wrapper">
 <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>

Answer 3

您可以使用flex实现此目的。使用

 flex-wrap:wrap

确保您的项目在水平溢出时换行，然后使用

justify-content:center

将它们水平居中。 Plunk here

很高兴知道：如果你遇到垂直对齐/居中，你可以按照这种方法使用 align-items：center 。

希望这有帮助！

根据对象数量将CSS规则应用于显示对象

3 个答案: