如何将不同大小的图像放置在 2 列中并对齐 figcaption

Question

对不起，如果这是一个微不足道的问题，我对一般编程很“新”，但这里是：

所以我正在制作一个投资组合页面作为练习，但我无法解决以下问题。

我有 6 个数字，都包含一个 img（它们是链接）和一个 figcaption。我正在尝试将它们放在 2 列中 - 在这 2 列中，图像应该以它们的 figcaption 为中心。

我尝试了几种方法：尝试制作图像内联块，尝试为 2 列制作 2 个 div，尝试使用 Bootstrap 网格系统，但我总是遇到以下问题。

在全页视图中，较小的图像（宽度）添加了一些“自动填充”，因此它们周围的区域也变成了链接 + figcaption 不会显示在它们下方。我猜这是它们显示为内联块。无论我如何尝试，这种情况每次都会发生。

我知道必须有一个简单的解决方案，但我似乎无法找到它。请问有什么建议吗？

为了更好地理解这个问题，这里是我正在谈论的网站的链接： http://codepen.io/Bubicica/pen/RRaaze（注意这里看起来不错，这就是我想要的样子） http://codepen.io/Bubicica/full/RRaaze/（这里的“项目模糊”看起来很糟糕，显示了问题）

这是我正在使用的（一个）CSS 和（一个）HTML：

figure {
  display: inline-block;
  width: 33%;
  margin-left: 12%;
  margin-bottom: 5%;
  padding: 0px;
  text-align: center;
}

figcaption {
  margin-top: 2%;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

<figure>
      <a href="https://www.youtube.com/watch?v=N42X5dljQGk" target="_blank"><img src="http://placekitten.com/300/300" class="img-responsive kitten" id="img1"></a>
      <figcaption>Project Fur
      </figcaption>
</figure>

<figure>
    <a href="https://www.youtube.com/watch?v=tYXlFYBW56g&feature=youtu.be" target="_blank"><img src="http://placekitten.com/310/330" class="img-responsive kitten" id="img2"></a>
    <figcaption>Project Warm
    </figcaption>
</figure>

编辑：将 Width 设置为 auto 或根本不设置 figure 可以让我右对齐，但图像在右（第二）列中没有相互对齐。

Answer 1

似乎对您的问题最简单的解决方案是在项目上使用 Flexbox (display: flex)，因为它允许高度自定义事物的对齐方式。对我来说最好的资源是 CSS-Tricks 指南，here。读完之后，我相信你对它有足够的理解，能够在这里应用到你的问题。

Answer 2

又快又脏。由于您将图像定义为块，因此图像不允许自己居中，因此请重置它。从figure 中删除左边距（通过padding 添加间距）并将整个内容设置为border-box，以便将填充吸收到计算的宽度中。将左边的浮动和偶数 figure 清除浮动，这样您就不会在高大的数字后出现锯齿状的流动。

.img-responsive {
    display: inline-block;
}

figure {
    display: block;
    box-sizing: border-box;
    width: 50%;
    /* margin-left: 12%; */
    margin-bottom: 5%;
    padding: 0px;
    text-align: center;
    float: left;
}

figure:nth-child(even) {
    clear: left;
}

确保将所有这些都包含在针对您所定位的任何显示的适当媒体查询中。