TailwindCSS : Как расположить два так, чтобы они находились в центре экрана

#tailwind-css

Вопрос:

Я использую css с попутным ветром, чтобы расположить два lt;divgt; внутри одного родителя lt;divgt; .

Я хочу, чтобы родитель был в центре экрана, поэтому я использую «гибкий центр обоснования». Я также хочу, чтобы два дочерних lt;divgt; элемента были упорядочены строка за строкой, поэтому я использую «блок». Однако они по-прежнему отображаются в одном ряду.

Вот как это выглядит:

 lt;div className="flex justify-center"gt;  lt;div className="block"gt; lt;!-- DIV 001 -- gt;  lt;/divgt;  lt;div className="block"gt; lt;!-- DIV 002 -- gt;  lt;/divgt; lt;/divgt;

Какое изменение я должен внести, чтобы два дочерних DIV занимали всю ширину/строку ?

Ответ №1:

Ты имеешь в виду вот так?

 lt;link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /gt; lt;div class="flex h-screen"gt;  lt;div class="m-auto"gt;  lt;div class="block"gt; lt;!-- DIV 001 --gt;  DIV 1  lt;/divgt;  lt;div class="block"gt; lt;!-- DIV 002 --gt;  DIV 2  lt;/div  lt;/divgt; lt;/divgt;

Ответ №2:

Попробуйте что-нибудь вроде этого:

 lt;link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /gt;   lt;div class="flex justify-center w-full items-center min-h-screen"gt;  lt;divgt;  lt;divgt;  div 1  lt;/divgt;  lt;divgt;  div 2  lt;/divgt;  lt;/divgt; lt;/divgt;