Я хочу иметь 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;
}
Вот пример использования 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>
.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>
Приветствую человека. Это сработало. Я дам тебе лучший ответ через секунду. Спасибо еще раз!