web-dev-qa-db-fra.com

Alignement vertical avec tailwindcss sur la division plein écran

Comment puis-je aligner verticalement une div avec vent arrière? Ce que je veux:

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

Ce que j'ai actuellement:

-----------------------------------
|             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');
}

J'ai réussi à centrer sur l'axe secondaire (gauche-droite) avec la classe items-center. Lire la documentation que j'ai essayée align-middle mais cela ne fonctionne pas. J'ai confirmé que les divs ont toute leur hauteur et my-auto.

J'utilise cette version de tailwind: https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

Voici un JSFIDDLE: https://jsfiddle.net/7xnghf1m/2/

tailwind-css
9
Anders

Utilisez la classe justify-center pour aligner sur axe principal. align-middle fonctionne sur axe transversal.

1
Anders

Vous pouvez aussi faire

<div class="flex h-screen">
  <div class="m-auto">
    <h3>title</h3>
    <button>button</button>
  </div>
</div>
10
Nartub

Justify-Center et Items-Center

Alors que la réponse d'Anders résout le problème dans ce cas particulier, je pense qu'il est important de noter que l'utilisation de justify-center et items-center est circonstancielle.

Jetons un coup d'oeil à l'un des exemples de la documentation de vent arrière .

<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>

Comme nous pouvons le voir, le code ci-dessus centre les éléments horizontalement. La raison en est que la classe centre justifié centre l'élément sur l'axe principal du conteneur flexible .

Cela signifie que si nous devions changer l'axe principal en "colonne", nous obtiendrions un résultat différent.

<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 et Items-Center centre les éléments sur l'axe principal et l'axe transversal, et ils peuvent être utilisés à la place l'un de l'autre. Ils sont opposés les uns aux autres et produiront des résultats différents en fonction de l'axe principal actuel.

4
Linus Juhlin

L'alignement vertical est un peu délicat. Cela devrait fonctionner.

Voici un exemple de code pour produire une vue similaire à l'image ASCII dans la question.

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

<div class="relative h-32 bg-blue-400">
  <div class="absolute inset-0 flex items-center justify-center">
    Item 1
    <br>
    Item 2
  </div> 
</div>
1
mythicalcoder