Каким-то образом центрирование div все еще кажется людям проблематичным. В последнее время я в основном работал с Tailwind CSS, и я хотел быстро поделиться тем, как я центрирую div с помощью Tailwind. Я сначала покажу примеры, а потом опишу, что происходит.
<div class="flex flex-row min-h-screen justify-center items-center">
I am centered
</div>Одни и те же классы работают либо с flex-row, либо с flex-col, которые устанавливают основную ось флексбокса горизонтально или вертикально соответственно. Установка высоты с помощью min-h-screen — это простой способ занять весь экран. На последних двух занятиях мне нужно было немного изучить CSS.
Я слишком долго возился с обоснованием и выравниванием, прежде чем, наконец, изучил, на что они влияют. justify-content относится к тому, как контент должен располагаться вдоль главной оси, а align-content относится к тому, как контент должен располагаться по поперечной оси. Выравнивание содержимого и выравнивание содержимого с помощью Tailwind — это простые сопоставления один к одному между их классами и фактическим CSS, поэтому, как только я понял, как работает CSS, я понял, как работает утилита.
Первоначально опубликовано на https://thomasstep.com 23 июля 2021 г.
