使语义图中的图像水平定向

Question

我试图通过将图像全部放置在一个图形标记中或将它们放置在5中并同时摆弄它们，以使图像标记中的图像水平定向。 display：inline-block，float：left，margin：left / right或position：absolute不做任何事情（如果窗口太大，最左边的图像会“溢出”到右上角，但它们都是如果窗口足够小，则连续一行），并且一般的google搜索都无法给我关于语义图css的任何信息，以了解更多有关... 这是我的CSS和代码：

figure{
display:inline-block;
float:left;
margin-top:25%;
padding-right:10px;
width:7em;
clear:inline;
}
figure img{
height:100px;
width:150px;
}
figcaption{
text-align:center;
}

html：

<figure>
<img src="./images/exmachina.png" 
alt="Ex Machina">
<figcaption>Ex Machina - Sniper 
Rifle</figcaption>
</figure>
<figure>
<img src="./images/urielsgift.jpg" 
alt="Uriel's Gift">
<figcaption>Uriel's Gift - Auto 
Rifle</figcaption>
</figure>
<figure>
<img src="./images/chaosdogma.png" 
alt="Chaos Dogma">
<figcaption>Chaos Dogma - Scout 
Rifle</figcaption>
</figure>
<figure>
<img src="./images/nergalpr4.jpg" 
alt="Nergal PR4">
<figcaption>Nergal PR4 - Pulse 
Rifle</figcaption>
</figure>
<figure>
<img src="./images/susanoo.png" 
alt="Susanoo">
<figcaption>Susanoo - Fusion 
Rifle</figcaption>
</figure>