html - 使用 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;
}