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

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 >
            <div >
                <img
                    src="images/SPW_Column_1.jpg"
                    alt="Men sportswear"
                    height="400px"
                />
                <a href="#">Мъжка екипировка</a>
            </div>

            <div >
                <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:

CodePudding user response：

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 >
    <figure >
        <img
            src="https://picsum.photos/400"
            alt="Men sportswear"
            height="400px"
        />
        <figcaption><a href="#">Мъжка екипировка</a></figcaption>
    </figure>

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

CodePudding user response：

.wrapper {
   display: flex;
   align-content: center;
   
}
.sportswear-link {
  text-align: center;
  margin: 10px;
}

    <div >
            <div >
                <img
                    src="https://images.unsplash.com/photo-1603739421258-4aa79ad860df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjh8fHNub3d8ZW58MHx8MHx8&w=1000&q=80"
                    alt="Men sportswear"
                    height="400px"
                />
                <a href="#">Мъжка екипировка</a>
            </div>

            <div >
                <img
                    src="https://cdn.mos.cms.futurecdn.net/ZAhFASRscCscBUj33239dH.jpg"
                    alt="Women sportswear"
                    height="400px"
                />
                <a href="#">Женска екипировка</a>
            </div>
        </div>

CodePudding user response：

you can use display:flex; and align-items:center; to center the links.

Here is the example.

.wrapper{
  display:flex;
}

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

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

            <div >
                <img
                    src="images/SPW_Header_Column_2.jpg"
                    alt="Women sportswear"
                    height="400px"
                />
                <a href="#">Женска екипировка</a>
            </div>
        </div> -->
        
<!DOCTYPE html>
<html>
  <head>
    <title>Flex</title>
  </head>
  <body>
    <div >
      <div >
        <img width="200" src="https://upload.wikimedia.org/wikipedia/commons/8/84/Ski_Famille_-_Family_Ski_Holidays.jpg"/>
        <a href="https://en.wikipedia.org/wiki/Skiing">Skiing</a>
      </div>
      <div >
        <img width="200" src="https://upload.wikimedia.org/wikipedia/commons/8/84/Ski_Famille_-_Family_Ski_Holidays.jpg"/>
        <a href="https://en.wikipedia.org/wiki/Skiing">Skiing</a>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

using flexbox , can help you a lot. check the link for more explanation : https://www.w3schools.com/css/css3_flexbox.asp

.wrapper {
    display: flex;
}

.sportswear-link {
    margin: 10px;
    padding: 20px;
    font-size: 30px;
}

<div >
          <div >
              <img
                  src="https://picsum.photos/200/300"
                  alt="Men sportswear"
                  height="400px"
              />                
              <a href="#">Мъжка екипировка</a>
          </div>

          <div >
              <img
                  src="https://picsum.photos/200/300"
                  alt="Women sportswear"
                  height="400px"
              />
              <a href="#">Женска екипировка</a>
          </div>
  </div>