需要幫助使用CSS/HTML對齊3張圖片

我一直在最近在網站上工作，而且我無法在整個頁面上對齊3個不同大小的圖片，我非常需要這個問題的一些幫助。這裏是我的CSS代碼：需要幫助使用CSS/HTML對齊3張圖片

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

而我的HTML：

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

來源

2017-07-02 Craftylamma

對齊......但如何？您有兩個可能的座標軸和大量的場景，可以將其視爲一個對齊。你想如何安排這些圖像：在基線？垂直居中？水平居中？兩者之間的空間？包含一些插圖以向我們展示您打算實現的目標將非常有用。此外，包括一個最小的，具體的和可驗證的例子可以幫助很多。 – Terry

@Terry我試圖讓他們並排。 – Craftylamma

我嘗試...閱讀...你的心...
，並認爲你需要：
一CCS的位：

div.gallery {display: inline-block; }

和一些HTML的：

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

所有3或4或5和

<br>

爲一個新行。最後一個

</center>

要關閉它。

Et瞧：你可以做/使用數以百萬計的佈局。或者你聽調料女孩，你可以「告訴我你想要什麼，你真的想要什麼...」^^

來源

2017-07-02 21:57:15

你的問題留下了很多解釋（和猜測）的空間，但對於圖像帶字幕的標籤應該使用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>

來源

2017-07-02 22:09:37 Johannes

我現在的代碼已經這樣做了。我需要並排放置圖像。 – Craftylamma

好吧，你應該在問題中寫下。「對齊」可以意味着水平或垂直。有40％的寬度，人們認爲它應該是垂直的，因爲3×40的寬度就是這個寬度。 – Johannes

需要幫助使用CSS/HTML對齊3張圖片

回答

相關問題