Проблема с выравниванием div, css

Question

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

Скрин

Answer 1

Например так ) Вот тут подробности http://htmlbook.ru/css/vertical-align

И почитайте пожалуйста про строчные и блочные элементы. Это полезно :)

.link {
  display: inline-block;
  vertical-align: top;
}

<a href="#" class="link">
            <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="#" class="link">
            <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="#" class="link">
            <div class="Div">
                <img src="/resource/AnimeLogos/DemonSlayer.jpg" class="AnimiesLogo" alt="DemonSlayer">
                <p class="Text">Клинок рассекающий Демонов</p>
                <p class="SerialText">Сериал</p>
            </div>
        </a>

Answer 2

Добавьте float: left; и всё у вас прекрасно будет работать. Причем во всех без исключения браузерах. Пример:

.Div {
  float: left;
  display: inline-block;
  background: rgba(0, 0, 0, 0.548);
  width: 300px;
  height: auto;
  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;
}

<a href="#">
  <div class="Div">
    <img src="https://elit-knigi.ru/images/185419.jpg" class="AnimiesLogo" alt="MiliyVoFrankse">
    <p class="Text">Милый во Франксе</p>
    <p class="SerialText">Сериал</p>
  </div>
</a>
<a href="#">
  <div class="Div">
    <img src="https://filmillion.hb.bizmrg.com/uploads/18664/pos-6e7e6fbdcf66212b64433294419181.jpg" class="AnimiesLogo" alt="NoGameNoLife">
    <p class="Text">Нет Игры Нет Жизни Нет Игры Нет Жизни Жизни Нет Игры Нет Жизни Жизни Нет Игры Нет Жизни Жизни Нет Игры Нет Жизни Жизни Нет Игры Нет Жизни</p>
    <p class="SerialText">Сериал</p>
  </div>
</a>
<a href="#">
  <div class="Div">
    <img src="https://appagg.co/ii/000/007/078/7078793.png" class="AnimiesLogo" alt="DemonSlayer">
    <p class="Text">Клинок рассекающий Демонов</p>
    <p class="SerialText">Сериал</p>
  </div>
</a>

БЛОГ НА HUSL

Проблема с выравниванием div, css

Ответы (2 шт):