Question

对不起，如果这是一个微不足道的问题，我是新的＆＃39;一般的编程，但这里是：

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

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

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

在整页视图中，较小的图像（宽度）有一些＆＃34; autopadding＆＃34;添加到它们，所以它们周围的区域也成为一个链接+其下没有显示figcaption。我猜这是他们显示为内联块。无论我如何尝试，每次都会发生这种情况。

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

为了更好地理解这个问题，这里是我正在谈论的网站的链接： http://codepen.io/Bubicica/pen/RRaaze（注意它看起来不错，这就是我希望它看起来的样子） http://codepen.io/Bubicica/full/RRaaze/（此处＆＃39;项目模糊＆＃39;看起来非常糟糕并显示问题）

以下是我正在使用的（一个）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>

编辑：将宽度设置为自动或根本不设置为图给我正确的对齐，但随后图像在右（第二）列中没有彼此对齐。

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-Tricks指南，here。阅读完之后，我相信你对此有足够的了解，可以将它应用到你的问题中。

如何在figcaption对齐的情况下将不同大小的图像放在2列中

2 个答案: