Утилиты для управления вертикальным выравниванием строчного или табличного поля.
Используйте align-baseline, чтобы выровнять базовую линию элемента с базовой линией его родителя.
<span class="inline-block align-baseline ...">...</span><span class="inline-block align-top ...">...</span>Используйте align-middle, чтобы выровнять середину элемента с базовой линией плюс половину x-высоты родительского элемента.
<span class="inline-block align-middle ...">...</span>Используйте align-bottom, чтобы выровнять нижнюю часть элемента и его потомков с нижней частью всей строки.
<span class="inline-block align-bottom ...">...</span>Используйте align-text-top, чтобы выровнять верх элемента по верхнему краю шрифта родительского элемента.
<span class="inline-block align-text-top ...">...</span>Используйте align-text-bottom, чтобы выровнять нижнюю часть элемента по нижней части шрифта родительского элемента.
<span class="inline-block align-text-bottom ...">...</span>Чтобы управлять вертикальным выравниванием только в определенной контрольной точке, добавьте префикс {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,
}
}