CSS/HTMLを使用して3つの画像を整列させるのに手助けが必要

Question

最近サイトで作業していて、3つの異なるサイズの画像をページ全体に揃えようとしましたが、この問題で助けが必要です。 ...

私がしよう

<img src="Images/LoadingE.png"> 
<p class="gameimages" style="clear: both; text-align: centre;">We have an animated loading screen!</p> 
<img src="Images/GameE.png"> 
<p class="gameimages" style="clear: both; text-align: centre;">We have an interactive main menu!</p> 
<img src="Images/player.png"> 
<p class="gameimages" style="clear: both; text-align: centre;">This is our amazing player!</p> 

Answer 1

...読んで...あなたの心とあなたが必要だと思う：

img .gameimages { 
    display: block; 
    margin: auto; 
    width: 40%; 
} 

そして、私のHTML： はここに私のCSSコードです
CCSのビット：HTMLの

div.gallery {display: inline-block; } 

及びビット：

01新しい行のためのすべての3又は4又は5と

<br> 

ため

<center><div class="gallery"><img ..> <p ..>..</p></div> 

。ついには

</center> 

を閉じてください。

Et voila：あなたが何百万人ものあなたのレイアウト/使用。 あなたはスパイスの女の子に耳を傾け、「あなたが望むもの、実際に本当に望んでいるものを教えてもらえますか？」^^

Answer 2

あなたの質問には解釈の余地がありますキャプションを使用する場合はfigureタグを使用し、imgタグとfigcaptionタグを内部に入れ、必要に応じてCSSを適用してください。私はあなたがこのようなものとします

figure { 
 
    margin: 10px auto; 
 
    width: 40%; 
 
    text-align: center; 
 
} 
 

 
figure img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<figure> 
 
    <img src="Images/LoadingE.png"> 
 
    <figcaption> 
 
    We have an animated loading screen! 
 
    </figcaption> 
 
</figure> 
 
<figure> 
 
    <img src="Images/GameE.png"> 
 
    <figcaption> 
 
    We have an interactive main menu! 
 
    </figcaption> 
 
</figure> 
 
<figure> 
 
    <img src="Images/player.png"> 
 
    <figcaption> 
 

 
    This is our amazing player! 
 
    </figcaption> 
 
</figure> 
 
<figure>