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

Question

抱歉，如果这是一个微不足道的问题，我对一般的编程是“新手”，但这里有:

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

我有 6 个数字，都包含一个 img(它们是链接)和一个 figcaption。我试图将它们放在 2 列中 - 在这 2 列中，图像应以其 figcaption 居中。

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

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

我知道一定有一个简单的解决方案，但我似乎找不到。有什么建议吗？

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

这是我正在使用的(一个)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>

编辑:将宽度设置为自动或根本不设置 figure 可以使我正确对齐，但是图像在右(第二)列中彼此不对齐。

Answer 1

似乎解决您的问题的最简单方法是在元素上使用 Flexbox (display: flex)，因为它允许对事物的对齐方式进行高度自定义。对我来说最好的资源是 CSS-Tricks 指南，here .读完之后，我相信您会对它有足够的了解，能够将它应用到您的问题中。