对齐居中的垂直和水平不规则缩略图

Question

再次问这个问题，因为它被标记为重复（它不是），我觉得它只是被埋没了。请在将其标记为另一个线程的另一个副本之前阅读。

我正在尝试将一些不规则形状的缩略图居中对齐到一个网格中，该网格会随着浏览器窗口的缩小而分成列。我真的很接近这段代码，但是我需要在每张图片下加上标题。我找不到这个问题的答案。我认为 figcaption 会起作用，但它的对齐方式很奇怪。缩略图的最大尺寸为 200px^2。所有这些缩略图都保持它们的比例。

JS Fiddle Example

//CSS
.centered {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 1px solid red;  /* for testing only */
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    float:left;
}

//HTML
<div class="centered">
    <img src="http://placehold.it/200x150" alt="" />
</div>

<div class="centered">
    <img src="http://placehold.it/150x200" alt="" />
    <figcaption>This text isn't working properly</figcaption>
</div>

<div class="centered">
    <img src="http://placehold.it/200x160" alt="" />
</div>

<div class="centered">
    <img src="http://placehold.it/140x200" alt="" />
</div>

<div class="centered">
    <img src="http://placehold.it/200x150" alt="" />
</div>

Answer 1

基本上你需要改变你的html。您应该在figure 标签中使用image 和figcaption。

.centered {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 1px solid red;  /* for testing only */
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    float:left;
}
figure{
	margin:0;
	padding:0;
}
figure img{
	display:block;
	margin: 0 auto;
}

<div class="centered">
    <img src="http://placehold.it/200x150" alt="" />
</div>

<div class="centered">
    <figure>
    	<img src="http://placehold.it/150x200" alt="" />
    	<figcaption>This text isn't working properly</figcaption>    	
    </figure>
</div>

<div class="centered">
    <img src="http://placehold.it/200x160" alt="" />
</div>

<div class="centered">
    <img src="http://placehold.it/140x200" alt="" />
</div>

<div class="centered">
    <img src="http://placehold.it/200x150" alt="" />
</div>