Вертикальное выравнивание

Baseline

Используйте align-baseline, чтобы выровнять базовую линию элемента с базовой линией его родителя.

Top

Используйте align-top, чтобы выровнять верх элемента и его потомков с верхом всей строки.

Middle

Используйте align-middle, чтобы выровнять середину элемента с базовой линией плюс половину x-высоты родительского элемента.

Bottom

Используйте align-bottom, чтобы выровнять нижнюю часть элемента и его потомков с нижней частью всей строки.

Text Top

Используйте align-text-top, чтобы выровнять верх элемента по верхнему краю шрифта родительского элемента.

Text Bottom

Используйте align-text-bottom, чтобы выровнять нижнюю часть элемента по нижней части шрифта родительского элемента.

Адаптивность

Чтобы управлять вертикальным выравниванием только в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите вертикального выравнивания. Например, добавление класса md:align-top к элементу приведет к применению утилиты align-top при средних размерах экрана и выше.

<div class="relative">
  <span class="align-middle md:align-top ...">...</span>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Варианты

По умолчанию, только responsive варианты создаются для утилит vertical-alignment.

Вы можете контролировать, какие варианты создаются для утилит vertical-alignment для изменения свойства verticalAlign в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       verticalAlign: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения vertical-alignment, Вы можете полностью отключить их, установив для verticalAlign свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     verticalAlign: false,
    }
  }