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

Question

抱歉，如果这是一个微不足道的问题，我 'new' 对一般编程很感兴趣，但这里有：

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

我有 6 个数字，都包含一个 img（它们是 links）和一个图形说明。我试图将它们放在 2 列中 - 在这 2 列中，图像应以其 figcaption 居中。

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

在完整页面视图中，较小的图像（宽度）添加了一些 "autopadding"，因此它们周围的区域也变成了 link + 图注不显示在它们下面.我猜这是它们显示为内联块。无论我如何尝试，每次都会发生这种情况。

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

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

这是我正在使用的 CSS(s)（之一）和 HTML(s)（之一）：

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>

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

Answer 1

又快又脏。由于您将图像定义为块，因此图像不会让自己居中，因此请重置它。从 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;
}

确保将所有这些包装在适合您定位的任何显示器的媒体查询中。

Answer 2

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

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

How to place differently sized images in 2 columns with figcaption aligned

html

css

position

image

center