Как центрировать элемент в CSS с помощью Tailwind
6 февраля 2023 г.Tailwind становится все более популярным и широко используемым фреймворком, который в некоторых случаях упрощает создание и поставку функций и продуктов. В этом руководстве мы расскажем, как центрировать элемент или текст по вертикали и горизонтали с попутным ветром.
В другой статье я уже рассказывал, как центрировать HTML-элемент как по горизонтали, так и по вертикали с помощью CSS. Если вы хотите узнать об этом, нажмите здесь.
Горизонтальное и вертикальное центрирование элемента с попутным ветром
Горизонтальное и вертикальное центрирование в Tailwind легко выполняется с помощью flexbox. Все, что нам нужно сделать, это три вещи:
* используйте h-screen, чтобы сделать элемент высотой экрана
* используйте flex, чтобы сделать элемент flexbox
* используйте items-center для вертикального центрирования
* используйте justify-center, чтобы центрировать его по горизонтали
Тогда наш код выглядит так: n
<div class="h-screen flex items-center justify-center">
Horizontally and Vertically Centered Element
</div>
Что приводит к такому результату:
See the Pen Горизонтальное и вертикальное центрирование с помощью Tailwind от smpnjn (< a href="https://codepen.io/smpnjn">@smpnjn) на CodePen .
Вертикальное центрирование элемента с помощью Tailwind
Самый простой способ центрировать что-либо по вертикали — сделать то, что мы делали раньше, и использовать flexbox. Однако на этот раз мы удалим justify-center. После этого элемент будет центрирован только по вертикальной оси. п
<div class="h-screen flex items-center">
Vertically Centered Element
</div>
Вы можете увидеть пример этого в кодовой ручке ниже:
См. Pen здесь.
Горизонтальное центрирование элемента с помощью Tailwind
Точно так же, как мы центрировали элемент div по вертикали выше, мы можем также центрировать по горизонтали, используя наш предыдущий подход. Код для этого выглядит так: n
<div class="flex justify-center items-center">
Horizontally Centered Element
</div>
Это тот же код, который мы использовали для горизонтального и вертикального центрирования, только без h-screen. Вот результат:
См. Pen здесь
Заключение
В Tailwind легко центрировать элементы с помощью flexbox. В этом руководстве мы узнали, как центрировать элементы по вертикали и горизонтали, включая элементы HTML и текст, что чрезвычайно полезно в веб-разработке.
Чтобы узнать больше о CSS в целом, вы можете найти мой другой контент здесь.
Также опубликовано здесь
Оригинал