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

再次问这个问题是因为它被贴上了复制品的标签（事实并非如此），我感觉它就像被掩埋了一样。请先阅读，然后再将其标记为另一个线程的副本

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

//CSS
.居中{
宽度：200px；
高度：200px；
填充：20px；
边框：1px纯红；/*仅用于测试*/
显示器：flex；
对齐内容：居中；/*水平对齐*/
对齐项目：居中；/*垂直对齐*/
浮动：左；
}
//HTML
这篇课文不能正常工作

基本上，您需要在html中进行更改。您应该在

图

标签中选择

图像

和

figcaption

.centered{
宽度：200px；
高度：200px；
填充：20px；
边框：1px纯红；/*仅用于测试*/
显示器：flex；
对齐内容：居中；/*水平对齐*/
对齐项目：居中；/*垂直对齐*/
浮动：左；
}
身材{
保证金：0；
填充：0；
}
图img{
显示：块；
保证金：0自动；
}

这篇课文不能正常工作

ooh，figcaption现在更有意义了。我不知道数字标签。好好读一读。完全有道理。非常感谢。

//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>