使用 HTML 对齐图像答案

【问题标题】：aligning images using HTML使用 HTML 对齐图像
【发布时间】：2017-02-27 02:24:45
【问题描述】：

我目前正在尝试设计一个网页。我对 HTML 没有太多经验，因此很难让我的页面看起来像我计划的那样。我想要四个方形图像，两个顶部，两个直接在下面，但我很难对齐这些。我试图对此进行研究，但我似乎能找到的只是带有文本换行的示例。任何帮助表示赞赏，谢谢。

【问题讨论】：

请分享一些代码

标签： html image web google-web-designer

【解决方案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;
}

【讨论】：