如何使图像多个图像响应并居中？ [复制]

Question

我在这里创建了一个网站，我应该将他们的名字放在他们的下方并居中。截图是here，但它们没有居中，在移动设备上看起来很奇怪。我也需要它来响应。我可以添加什么来解决这个问题？

我的 HTML：

<center>
    <h1>Meet our officers!</h1>
</center>
<center>
<div class="main">
    <figure>

        <center><img src="boysmeettheofficers/Baha Abed.jpg" width="150" height="150" alt="missing"></center>
        <center><figcaption>President</figcaption></center>
    </figure>
    <figure>
        <img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="150" height="150" alt="missing">
        <figcaption>Vice President</figcaption>
    </figure>
    <figure>
        <img src="boysmeettheofficers/Omar Ibrahim.jpg" width="150" height="150" alt="missing">
        <figcaption>Secertary</figcaption>
    </figure>
    <figure>
        <img src="boysmeettheofficers/Othman Al-Mesbah.jpg" width="150" height="150" alt="missing">
        <figcaption>Historian</figcaption>
    </figure>
    <figure>
        <img src="boysmeettheofficers/Salman Al-Estath.jpg" width="150" height="150" alt="missing">
        <figcaption>Treasurer</figcaption>
    </figure>
</div>
</center>

我的 CSS：

.main {
    display: flex;
}

Answer 1

解决方案

---

将justify-content: center; 添加到您的.main 类（或带有display: flex; 的元素）。这就是您可以水平居中 flex 元素的方法。

要使其具有响应性，请添加flex-wrap: wrap;。

.main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

<center>
    <h1>Meet our officers!</h1>
</center>
<center>
    <div class="main">
        <figure>

            <center><img src="boysmeettheofficers/Baha Abed.jpg" width="150" height="150" alt="missing"></center>
            <center><figcaption>President</figcaption></center>
        </figure>
        <figure>
            <img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="150" height="150" alt="missing">
            <figcaption>Vice President</figcaption>
        </figure>
        <figure>
            <img src="boysmeettheofficers/Omar Ibrahim.jpg" width="150" height="150" alt="missing">
            <figcaption>Secertary</figcaption>
        </figure>
        <figure>
            <img src="boysmeettheofficers/Othman Al-Mesbah.jpg" width="150" height="150" alt="missing">
            <figcaption>Historian</figcaption>
        </figure>
        <figure>
            <img src="boysmeettheofficers/Salman Al-Estath.jpg" width="150" height="150" alt="missing">
            <figcaption>Treasurer</figcaption>
        </figure>
    </div>
</center>

这是它在移动设备上的样子：