Как разместить изображения рядом друг с другом с центрированными ссылками под ними?

Я хочу иметь 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;
}

Мой текущий результат: Как разместить изображения рядом друг с другом с центрированными ссылками под ними?

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
22
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Вот пример использования 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>

Приветствую человека. Это сработало. Я дам тебе лучший ответ через секунду. Спасибо еще раз!

Alexander Shestakov 05.04.2022 16:43

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

вы можете использовать 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>

использование flexbox может вам очень помочь. проверьте ссылку для получения дополнительных объяснений: 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>

Другие вопросы по теме