How to have images next to each other with centered links under them?

April 5, 2022

I want to have 2 (or more) images with links under them that lead to other pages. I want the images to be next to each other and the links under them to be centered under the images they represent. Is there any way to do this? Here’s an image with the layout I’m looking for:

Note #1: IMG 1 and IMG 2 have the same height.

Note #2: Anchor 1 is centered under IMG 1 and Anchor 2 is centered under IMG 2.

My current code:

         <div class="wrapper">
            <div class="sportswear-link men">
                <img
                    src="images/SPW_Column_1.jpg"
                    alt="Men sportswear"
                    height="400px"
                />
                <a href="#">Мъжка екипировка</a>
            </div>

            <div class="sportswear-link women">
                <img
                    src="images/SPW_Header_Column_2.jpg"
                    alt="Women sportswear"
                    height="400px"
                />
                <a href="#">Женска екипировка</a>
            </div>
        </div>

.wrapper {
    text-align: center;
    overflow: hidden;
}

.sportswear-link {
    display: inline;
    clear: both;
}

My current result:

>Solution :

Here’s an example using flex and some more appropriate html tags. Cheers

.wrapper {
    display: flex;
}

.sportswear-link {
    display: flex;
    flex-direction: column;
    align-items: center;
}

 <section class="wrapper">
    <figure class="sportswear-link men">
        <img
            src="https://picsum.photos/400"
            alt="Men sportswear"
            height="400px"
        />
        <figcaption><a href="#">Мъжка екипировка</a></figcaption>
    </figure>

    <figure class="sportswear-link women">
        <img
            src="https://picsum.photos/400"
            alt="Women sportswear"
            height="400px"
        />
        <figcaption><a href="#">Женска екипировка</a></figcaption>
    </figure>
</section>