使用HTML對齊圖像

Question

我正在嘗試設計一個網頁。我對HTML沒有多少經驗，因此很難讓我的頁面看起來如何計劃。我想有四個方形圖像，兩個直接位於下方的兩個頂部，但我正努力對齊這些。我試圖研究這個，但所有我似乎能夠找到與文本換行的例子。 任何幫助表示讚賞，謝謝。

Answer 1

你的圖像尺寸是否相同？

沒有關於您的網頁上想要什麼的更多信息，很難知道您需要什麼。 但是這裏有一個簡單的例子：http://codepen.io/cecileledoux/pen/mWJyGV

<section> 
    <figure> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" /> 
    </figure> 
    <figure> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" /> 
    </figure> 
</section> 
<section> 
    <figure> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" /> 
    </figure> 
    <figure> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" /> 
    </figure> 
</section> 

section{ 
    margin-bottom: 20px; 
    text-align: center; 
} 
figure{ 
    display: inline-block; 
}