Центр содержимого в сетке с фиксированной высотой

Question

на https://cdn02.plentymarkets.com/i3n17mn9ei6m/frontend/School-Mood/redesign09_2019/timeless-air/school-mood-timeless-air-dev.html Я хотел бы расположить текст по центру в верхнем левом тайле.

Я использовал этот код:

    <div class="row row-flex">
      <div class="col-xs-12 col-md-6">
            <div class="shadow_box" style="height:456.891px;">
          <h2 class="text-center">Komplett</h2>
          <p>Mit dem 7-teiligen Set, bestehend aus Ranzen, Turnbeutel, gefülltem Etui, Schlamperrolle, Brustbeutel, Brotdose und Patchy-Set seid ihr bestens ausgestattet für den Schulalltag.</p>
          </div>
      </div>
      <div class="col-xs-12 col-md-6">
            <div class="shadow_box" style="padding:0!important;">
   <img src="https://cdn02.plentymarkets.com/i3n17mn9ei6m/frontend/School-Mood/redesign09_2019/timeless-air/Komplett_Tair.jpg" style="max-width:100%;" />
        </div>
    </div>
</div>

Я установил для div значениеточно высоту изображения, чтобы левая и правая мозаика совпадали по высоте.

Как я могу вертикально центрировать весь текст в левой плитке?Кажется, я не могу это выяснить.

Спасибо за любую помощь!

Answer 1

Вы должны будете добавить это в свой CSS в свой контейнер shadow_box

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /*

Как вертикальное центрирование текста с помощью CSS

Вертикальное и горизонтальное центрирование