如何让图像彼此相邻并在其下方居中链接？

Question

我想要 2 张（或更多）图片，图片下方带有指向其他页面的链接。我希望图像彼此相邻，并且它们下面的链接在它们所代表的图像下方居中。有什么办法吗？这是我正在寻找的布局的图像：

注意 #1：IMG 1 和 IMG 2 的高度相同。

注意 #2：Anchor 1 位于 IMG 1 的中心，Anchor 2 位于 IMG 2 的中心。

我当前的代码：

         <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;
}

我目前的成绩：

Answer 1

这是一个使用 flex 和一些更合适的 html 标签的例子。干杯

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

Answer 2

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

    <div class="wrapper">
            <div class="sportswear-link men">
                <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 class="sportswear-link women">
                <img
                    src="https://cdn.mos.cms.futurecdn.net/ZAhFASRscCscBUj33239dH.jpg"
                    alt="Women sportswear"
                    height="400px"
                />
                <a href="#">Женска екипировка</a>
            </div>
        </div>

Answer 3

您可以使用 display:flex; 和 align-items:center; 使链接居中。

这是例子。

.wrapper{
  display:flex;
}

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

<!-- <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> -->
        
<!DOCTYPE html>
<html>
  <head>
    <title>Flex</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="sportswear-link men">
        <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 class="sportswear-link women">
        <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>

Answer 4

使用 flexbox ，可以帮助你很多。查看 link 以获得更多解释： https://www.w3schools.com/css/css3_flexbox.asp

.wrapper {
    display: flex;
}

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

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

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

如何让图像彼此相邻并在其下方居中链接？

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

html

css

layout