Как выровнять слева текст по центру по высоте?

Question

Код:

<div class="row">
  <div class="col-lg-6 col-xs-12">
    <p>
      <span style="text-transform: uppercase;">Нейминг </span>
      <br /><br /> DEFT [ Дэфт ] — в переводе с английского означает «искусный», при этом имеет стремительное, прямое и четкое звучание, отражая смелый характер бренда и бескомпромиссное качество.
    </p>
  </div>
  <div class="col-lg-6 col-xs-12">
    <img src="/images/project/honmil/5.jpg" style="width: 100%;" />
  </div>
</div>

Работает вот так:

Как выровнять слева текст по центру по высоте?

Answer 1

Если вы хотите вертикально отцентрировать текст внутри контейнера с чёрным фоном, то добавьте элементу-родителю div свойство display со значением flex, а также добавьте свойство align-items со значением center, чего можно добиться добавлением бутстраповских классов d-flex и align-items-center, как и указал entithat.

Прилагаю ссылки на русском.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="row">
  <div class="col-lg-6 col-xs-12 d-flex align-items-center">
    <p>
      <span style="text-transform: uppercase;">Нейминг </span>
      <br /><br /> DEFT [ Дэфт ] — в переводе с английского означает «искусный», при этом имеет стремительное, прямое и четкое звучание, отражая смелый характер бренда и бескомпромиссное качество.
    </p>
  </div>
  <div class="col-lg-6 col-xs-12">
    <img src="https://image.shutterstock.com/z/stock-photo-delivering-a-parcel-dog-and-cat-1366470764.jpg" style="width: 100%;" />
  </div>
</div>

БЛОГ НА HUSL

Как выровнять слева текст по центру по высоте?

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