“中心左侧”与css

Question

很难解释我想要的东西，所以我将展示我想要的结果的动画gif（在photoshop中制作）和我在jsFiddle中的代码。

如您所见，当蓝框大小不足以容纳一行中的所有项目时，4º项目将移动到第二行（如预期的那样），但不是在中心对齐，而是左对齐

我的CSS代码

.outer-box
{
  background: #00cc99;
  width: 100%;
  max-width: 800px;
  font-size: 0;
  text-align: center;
  padding: 10px;
}

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

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

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

我的HTML

<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>

我的结果

我的预期结果

我尝试使用float divs（外部框中的一个div和使用float左侧的链接元素）但没有成功。

有一种方法可以在没有javascript的情况下实现这一点吗？ 这是jsFiddle中的代码。

PS。英语不是我的母语' - '。

Answer 1

使用flex或inline块，你可以使用1px高度的伪和2个盒子的宽度+它们的边距。

它将像一个fith框，完全填充第二行并作为第三行删除：

.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>

Inline-block version to play with

Answer 2

首先，我喜欢你提出问题的方式。漂亮的图片： - ）

如果没有额外的元素，我认为你不能做你想做的事。添加一个重新调整对齐的内联块元素可以达到你想要的效果。

.inner-box {
  text-align: left;
  display: inline-block;
}

请参阅https://jsfiddle.net/qgcz0ax4/

Answer 3

由于<a>标记，每个div都充当文本。只需将text-align设置为左侧的.outer-box - 如果你希望每个div都有中心对齐的文本，创建一个类并将该类赋予所有4个子div

.outer-box
{
  background: #00cc99;
  width: 100%;
  max-width: 800px;
  font-size: 0;
  text-align: left;
  padding: 10px;
}