Html 如何将多个图像与标题对齐？

我试图将4幅图像水平对齐，每幅图像都有自己的标题，然后将其他4幅图像完全对齐

我是新的代码，所以我只使用HTML和CSS

.skill bg{
填充底部：50px；
填充顶部：50px；
文本对齐：居中；
左边距：10%；
保证金权利：10%；
}
.技能{
列数：4；
列间距：0；
内部分页符：避免；
内破：避开立柱；
字体系列：“Poppins”，无衬线；
证明内容：之间的空间；
}
.skills>img{
显示器：flex；
宽度：100%；
}
@介质（最大宽度：768px）{
.技能{
列数：2
}
}

硬技能
文案
平面设计
用户研究
用户测试
HTML
CSS
原型
摄影

重置

图上的默认上边距

figure {
  margin-top: 0;
}


.skill bg{
填充底部：50px；
填充顶部：50px；
文本对齐：居中；
左边距：10%；
保证金权利：10%；
}
.技能{
列数：4；
列间距：0；
内部分页符：避免；
内破：避开立柱；
字体系列：“Poppins”，无衬线；
证明内容：之间的空间；
}
.skills>img{
显示器：flex；
宽度：100%；
}
身材{
边际上限：0；
}
@介质（最大宽度：768px）{
.技能{
列数：2
}
}

硬技能
文案
平面设计
用户研究
用户测试
HTML
CSS
原型
摄影
我发现float:left to figure同样有效，但您的答案是最完美的