“居左”与 css 对齐

Question

很难解释我想要什么，所以我将展示我想要的结果的动画 gif（在 Photoshop 中制作）以及 jsFiddle 中发生的情况的代码。

\n\n

\n\n

正如你所看到的，当蓝色框的大小不足以容纳一行中的所有项目时，4\xc2\xba 项目被移动到第二行（如预期），但他没有居中对齐，而是被左边了对齐。

\n\n

我的 CSS 代码

\n\n

.outer-box\n{\n  background: #00cc99;\n  width: 100%;\n  max-width: 800px;\n  font-size: 0;\n  text-align: center;\n  padding: 10px;\n}\n\n.outer-box a\n{\n  display: inline-block;\n  width: 120px;\n  height: 80px;\n  padding: 10px;\n  background: #ff5050;\n  font-size: 12px;\n}\n\n.outer-box a:hover\n{\n  background: #990000;\n}\n\n.outer-box a div\n{\n  background: #99ccff;\n  width: 100%;\n  height: 100%;\n}\n

\n\n

我的 HTML

\n\n

<div class="outer-box">\n  <a href="#"><div>I put image and text here</div></a>\n  <a href="#"><div>I put image and text here</div></a>\n  <a href="#"><div>I put image and text here</div></a>\n  <a href="#"><div>I put image and text here</div></a>\n</div>\n

\n\n

我的结果
\n

\n\n

我的预期结果
\n

\n\n

我尝试使用浮动 div（外框内的一个 div 和使用左浮动的链接元素），但没有成功。

\n\n

有没有一种方法可以在不使用 JavaScript 的情况下完成此任务？
\n这是我在jsFiddle中的代码。

\nPS。英语不是我的母语\'-\'。

\n

Answer 1

对于 flex 或 inline 块，您可以使用 1px 高度和 2 个框的宽度 + 它们的边距的伪值。

它将像第五个盒子一样，完全填充第二行并作为第三行下降：

.outer-box {
  background: #00cc99;
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  font-size: 0;
  padding: 10px;
}

.outer-box:after {
  content: '';
  max-height: 1px;
  width: 320px
}

.outer-box a {
  display: block;
  width: 120px;
  height: 80px;
  padding: 10px;
  background: #ff5050;
  font-size: 12px;
  margin: 5px 10px;
}

.outer-box a:hover {
  background: #990000;
}

.outer-box a div {
  background: #99ccff;
  height: 100%;
}

<h1> USE full page mode then resize window broser </h1>
<div class="outer-box">
  <a href="#"><div>I put image and text here</div></a>
  <a href="#"><div>I put image and text here</div></a>
  <a href="#"><div>I put image and text here</div></a>
  <a href="#"><div>I put image and text here</div></a>
</div>

可以使用的内联块版本