Суть вопроса в следующем: добавил кнопки в дивы и из-за текста в 2 строки в последнем диве, уезжает див(вверх) а не кнопка вниз, как прижать кнопку к нижнему краю, чтобы дивы остались в ряд?
.container {
padding-top: 13px;
margin: 0 auto;
width: 1920px;
height: 6581px;
background-color: #ffffff;
background: url(images/bg_main.jpg) no-repeat;
background-size: contain;
}
.gallery {
width: fit-content;
margin: 0 auto;
margin-top: 92px;
}
.gallery-block {
background-color: #444444;
display: inline-block;
background-color: #f7f7f7;
height: 481px;
width: 270px;
text-align: center;
margin: 0 14px;
}
.gallery-h5 {
text-align: center;
max-width: 169px;
margin: 0 auto;
margin-top: 20px;
color: #000000;
font-family: Poppins;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.14px;
}
.gallery-button {
width: 130px;
height: 30px;
background-color: #f44336;
color: #ffffff;
font-family: Poppins;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.14px;
border: none;
}
.gallery-span {
text-transform: uppercase;
}
.gallery img {
width: 271px;
height: 376px;
}
<div class="container">
<div class="gallery">
<div class="gallery-block"><img src="#" alt="piv">
<h5 class="gallery-h5"><span class="gallery-span">Assasin’s Creed:</span> Rogue</h5><button
class="gallery-button">Buy</button></div>
<div class="gallery-block"><img src="#" alt="GamePic">
<h5 class="gallery-h5"><span class="gallery-span">Tomb Raider</span></h5><button
class="gallery-button">Buy</button></div>
<div class="gallery-block"><img src="#" alt="GamePic">
<h5 class="gallery-h5"><span class="gallery-span">Ryse:</span> Son Of Rome</h5><button
class="gallery-button">Buy</button></div>
<div class="gallery-block"><img src="#" alt="GamePic">
<h5 class="gallery-h5"><span class="gallery-span">World Of Warcraft:</span>
Wrath Of The Linch King</h5><button class="gallery-button">Buy</button></div>
</div>
</div>
vertical-align
по умолчанию —baseline
, вот по базовой линии и выравнивается