How can I make images multiple images responsive and center them?

Question

I made a site here and I'm supposed to have their names under them and center them. A screenshot is here, but they aren't centred and look really weird on mobile. I need it to be responsive too. What can I add to fix this?

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

My CSS:

.main {
    display: flex;
}

'center' is a deprecated element and should no longer be used. — Paulie_D, Oct 07 '20 at 10:58
@Mohammad It looks like the image itself has white space on the right-hand-side. See https://i.stack.imgur.com/jFznt.png. You'll need to crop that off, otherwise even when the image is centred you'll have white space on the right. The markup of the page doesn't match the markup posted, when I checked, but display: flex is fine, see https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for some help (make ,main or parent element 100% width, height, align-items: center, justify-items: center from memory). — Anthony, Oct 07 '20 at 11:12

score -1 · Accepted Answer · edited Nov 13 '21 at 04:05

-1

Solution

Add justify-content: center; to your .main class (or the element with display: flex;). This is how you can horizontally center flex elements.

To make it responsive, add 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>

This is what it looks like on mobile:

edited Nov 13 '21 at 04:05

Peter Mortensen

30,738
21
105
131

answered Oct 07 '20 at 10:59

Fletcher Rippon

1,837
16
21

Thanks this centered it but it's still not responsive – Mohammad Al nesef Oct 07 '20 at 11:11
@MohammadAlnesef I updated to make it responsive – Fletcher Rippon Oct 07 '20 at 11:14
oh but that still doesn't make a difference on mobile? I uploaded it here https://acaschoolgpa.000webhostapp.com/meet-our-officers-boys.html – Mohammad Al nesef Oct 07 '20 at 11:20
@MohammadAlnesef you didn't add `flex-warp: wrap;` to the `.main` class – Fletcher Rippon Oct 07 '20 at 11:22
@MohammadAlnesef you need to fix your footer in mobile it takes all the screen up I had to remove it to take a photo – Fletcher Rippon Oct 07 '20 at 11:28
any idea on what I can do to fix the footer? – Mohammad Al nesef Oct 07 '20 at 11:52
@MohammadAlnesef I would remove `position: fixed;` so it stops being fixed on the screen (stays at the bottom of the screen while scrolling) – Fletcher Rippon Oct 07 '20 at 12:00
@MohammadAlnesef can you please not downvote my post I know my solution 100% works – Fletcher Rippon Oct 07 '20 at 12:01
I didn't downvote anything. I'm new here. I have no idea why people keep downvoting my post – Mohammad Al nesef Oct 07 '20 at 12:03
@MohammadAlnesef your post is getting downvoted because it either wasn't descriptive enough, wasn't clear or has been answered already can you upvote my post or accept my answer if you found it helpful. – Fletcher Rippon Oct 07 '20 at 12:14
I did but I cant upvote cause im new. but any tips on fixing the footer? – Mohammad Al nesef Oct 07 '20 at 12:20
@MohammadAlnesef thanks, remove `position: fixed;` from `footer { .. }` that will fix it – Fletcher Rippon Oct 07 '20 at 12:24

How can I make images multiple images responsive and center them?

1 Answers1

Solution