Вертикальное выравнивание с tailwindcss по всему экрану div - PullRequest
Новая
       21

Вертикальное выравнивание с tailwindcss по всему экрану div

5 голосов
/ 08 марта 2019

Как я могу вертикально выровнять div с попутным ветром?Что я хочу: 

-----------------------------------
|                                |
|                                |
|                                |
|             item1              |
|             item2              |
|                                |
|                                |
|                                |
-----------------------------------

Что у меня сейчас есть: 

-----------------------------------
|             item1              |
|             item2              |
|                                |
|                                |
|                                |
|                                |
|                                |
|                                |
-----------------------------------

HTML 

<div class="flex flex-col h-screen my-auto items-center bgimg bg-cover">
  <h3 class="text-white">heading</h3>
  <button class="mt-2 bg-white text-black font-bold py-1 px-8 rounded m-2">
    call to action
  </button>
</div>

CSS 

.bgimg {
    background-image: url('https://d1ia71hq4oe7pn.cloudfront.net/photo/60021841-480px.jpg');
}

У меня успешнопо центру на вторичной оси (слева направо) с классом items-center.Читая документацию, я попробовал align-middle, но она не работает.Я подтвердил, что дивы имеют полный рост и my-auto.

Я использую эту версию попутного ветра: https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

Вот JSFIDDLE: https://jsfiddle.net/7xnghf1m/2/

Ответы [ 3 ]

4 голосов
/ 08 марта 2019

Justify-Центр и Предмет-Центр

Хотя ответ Андерса решает проблему для этого конкретного случая, я думаю, важно отметить, что использование justify-center и items-center является косвенным.

Давайте посмотрим на один из примеров из документации по попутному ветру . 

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="flex justify-center bg-grey-lighter">
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

Как мы видим вышеупомянутый код центрирует элементы по горизонтали. Причина этого в том, что класс justify-center центрирует элемент на главной оси гибкого контейнера .

Это означает, что если бы мы изменили основную ось на «столбец», то получили бы другой результат. 

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="flex flex-col justify-center bg-grey-lighter">
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

Justify-Center и Items-Center центрирует элементы на главной оси и поперечной оси, и их можно использовать вместо друг друга. Они противоположны друг другу и будут давать разные результаты в зависимости от текущей главной оси.

2 голосов
/ 15 марта 2019

Вы также можете сделать 

<div class="flex h-screen">
  <div class="m-auto">
    <h3>title</h3>
    <button>button</button>
  </div>
</div>
1 голос
/ 08 марта 2019

Используйте класс justify-center для выравнивания по главной оси .align-middle работает на поперечной оси .

...