Появилась проблема относительно выравнивания div по одной линии, есть что-то типа сериального сайта, не парясь добавлять новые сериалы но столкнулся с проблемой с выравниванием всех div обьясняю причину - Если название сериала не помещается в div оно текст конечно же выбрасывает слово которое не вместилось на строку вниз но проблема в том что сам div после этого поднимается на вверх нежели как остальные div которые стоят в одном положении вот код
CSS
.Div {
display:inline-block;
background: rgba(0, 0, 0, 0.548);
width: 300px;
height: 500px;
margin-left: 15px;
margin-top: 20px;
text-align: center;
}
.SerialText{
position: relative;
font-size: 11pt;
color: white;
}
.Text {
position: relative;
font-size: 11pt;
color: white;
}
.Logo{
position: relative;
width: 100%;
height: 400px;
}
HTML
<a href="#">
<div class="Div">
<img src="/resource/AnimeLogos/MiliyVoFrankse.jpg" class="AnimiesLogo" alt="MiliyVoFrankse">
<p class="Text">Милый во Франксе</p>
<p class="SerialText">Сериал</p>
</div>
</a>
<a href="#">
<div class="Div">
<img src="/resource/AnimeLogos/NoGameNoLife.jpg" class="AnimiesLogo" alt="NoGameNoLife">
<p class="Text">Нет Игры Нет Жизни</p>
<p class="SerialText">Сериал</p>
</div>
</a>
<a href="#">
<div class="Div">
<img src="/resource/AnimeLogos/DemonSlayer.jpg" class="AnimiesLogo" alt="DemonSlayer">
<p class="Text">Клинок рассекающий Демонов</p>
<p class="SerialText">Сериал</p>
</div>
</a>
Скрин