Vertikale Ausrichtung mit Tailwind CSS über Vollbild-Div

Lesezeit: 7 Minuten

Benutzeravatar von ajthinking
ajdenken

Wie kann ich ein div mit Tailwind vertikal ausrichten? Was ich möchte:

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

Was ich aktuell habe:

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

Ich habe mich mit Klasse erfolgreich auf die sekundäre Achse (links-rechts) zentriert items-center. Beim Lesen der Dokumentation habe ich es versucht align-middle aber es funktioniert nicht. Ich habe bestätigt, dass die Divs die volle Höhe haben und my-auto.

Ich verwende diese Version von Tailwind: https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

Hier ist ein JSFiddle: https://jsfiddle.net/7xnghf1m/2/

  • Dies ist in den TailwindCSS-Dokumenten bereits ziemlich gut dokumentiert: tailwindcss.com/docs/flexbox-align-items/#center

    – Linus Juhlin

    8. März 2019 um 4:24 Uhr


  • ersetzen Sie my-auto durch justify-center

    – Jamal Eddine Naamani

    9. Oktober 2022 um 13:06 Uhr

  • m-auto text-center hat bei mir gut funktioniert.

    – Vivek Hotti

    21. Januar um 17:19 Uhr

Benutzeravatar von Nartub
Nartub

Sie können auch tun

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

  • Wie? Wie funktioniert das?? Bitte bitte erklären. @ Nartub

    – dhrumil barot

    9. Oktober 2022 um 15:31 Uhr


  • Es gibt eine Menge Magie mit automatischen Rändern und Flexbox, ich schlage vor, zu googeln, um alle Details zu erhalten 🙂

    – Nartub

    11. Oktober 2022 um 15:10 Uhr

  • @dhrumilbarot flex wird nur auf das nächste div-Element angewendet (in diesem Fall das mit class=”m-auto”), h-screen setzt die Höhe auf 100vh (100 % der Ansichtshöhe), um ihm den gesamten Raum zu geben des Bildschirms, mit dem Sie arbeiten können. m-auto setzt die Ränder auf automatisch, wodurch sie aufgefüllt werden und ihr ein „zentriertes“ Aussehen verleiht

    – Corei

    20. Dezember 2022 um 3:57 Uhr


Bezieht sich teilweise auf die Lösung von @mythicalcoder , verwendet aber nur die notwendigen Klassen, die von TailwindCss (Version 1.8.+) bereitgestellt werden:

  • flex : Um ein Flex-Div als Container zu verwenden
  • h-screen : Zum Anpassen der Containerhöhe an die Höhe des Ansichtsfensters.
  • justify-center : Mitte ausrichten (horizontale Mitte) – HauptachseDok
  • items-center : So richten Sie die Elemente zentriert aus (horizontale Mitte) – QuerachseDok

Meine Lösung zum Zentrieren von zwei Textzeilen:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

  <div class="flex h-screen justify-center items-center">
    <div class="text-center bg-blue-400"> <!-- ⬅️ THIS DIV WILL BE CENTERED -->
        <h1 class="text-3xl">HEADING</h1>
        <p class="text-xl">Sub text</p>
    </div>
  </div>

Benutzeravatar von Linus Juhlin
Linus Juhlin

Justify-Center und Items-Center

Während Anders ‘Antwort das Problem für diesen speziellen Fall löst, denke ich, dass es wichtig ist, darauf hinzuweisen, dass using justify-center Und items-center ist nebensächlich.

Schauen wir uns eines der Beispiele aus dem an Rückenwind Dokumentation.

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

<div class="flex justify-center bg-gray-100">
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>

Wie wir sehen können, zentriert der obige Code die Elemente horizontal. Der Grund dafür ist die Justify-Center-Klasse zentriert das Element auf der Hauptachse des Flex-Containers.

Das bedeutet, dass wir ein anderes Ergebnis erhalten würden, wenn wir die Hauptachse in „Spalte“ ändern würden.

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

<div class="flex flex-col justify-center bg-gray-100">
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>

Justify-Center und Items-Center zentrieren die Elemente auf der Hauptachse und der Querachse und können anstelle der anderen verwendet werden. Sie sind die Gegensätze zueinander und führen je nach aktueller Hauptachse zu unterschiedlichen Ergebnissen.

Benutzeravatar von mythicalcoder
Mythischer Coder

Entsprechend der Frage sollten “Items1”, “Items2” sowohl horizontal als auch vertikal ausgerichtet sein.

Horizontal => Textmitte/Justify-Mitte

Vertikal => Items-Center

Hier ist ein Beispielcode zum Erstellen einer Ansicht ähnlich dem ASCII-Bild in der Frage.

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

Benutzeravatar von Agni Gari
Agni Gari

Ich habe versucht, verschiedene Vorkommnisse der Zentrierung zusammenzufassen divs

Divs in Spalte zentrieren

Für Passform Weite
  <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
    <div className="bg-green-500 p-2">item 1</div>
    <div className="bg-pink-500 p-2">item 2</div>
  </div>

Geben Sie hier die Bildbeschreibung ein

Für volle Breite
  <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
    <div className="bg-green-500 p-2 w-full flex justify-center">
      item 1
    </div>
    <div className="bg-pink-500 p-2 w-full text-center">item 2</div>
  </div>

Geben Sie hier die Bildbeschreibung ein


Extra:

Vertikal geteilte Divs zentrieren
<div class="flex h-screen flex-col">
  <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
    <div class="bg-yellow-400 p-6">Item 1</div>
  </div>
  <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>

Geben Sie hier die Bildbeschreibung ein

Horizontal geteilte Divs zentrieren
<div class="flex h-screen">
  <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
    <div class="bg-yellow-400 p-6">Item 1</div>
  </div>
  <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>

Geben Sie hier die Bildbeschreibung ein

Zentrieren Sie Divs in Row

Für die passende Höhe

<div>
  <div class="flex h-screen items-center justify-center bg-yellow-400">
    <div class="flex justify-center bg-green-500 p-2">item 1</div>
    <div class="bg-pink-500 p-2 text-center">item 2</div>
  </div>
</div>

Geben Sie hier die Bildbeschreibung ein

Für volle Höhe

<div>
  <div class="flex h-screen items-center justify-center bg-yellow-400">
    <div class="flex h-full items-center bg-green-500 p-2">item 1</div>
    <div class="flex h-full items-center bg-pink-500 p-2">item 2</div>
  </div>
</div>

Geben Sie hier die Bildbeschreibung ein

Benutzeravatar von Rizky92
Rizky92

Die Antwort von @bastiotutuama ist bereits gut, aber wenn es andere umliegende Elemente gibt, verwenden Sie anstelle von items-center die Selbstversorgungsprogramme ausrichten. Quelle

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

<div class="bg-blue-500 flex justify-center h-screen">
    <div class="bg-red-300 self-start">
        <h1>
            Let us get you off the board <br>
            <span>Pursue what you wanted</span>
        </h1>
        <div class="mt-2 flex items-center">
            <a href="#" class="block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold">Get started</a>
            <a href="#" class="block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold">Learn more</a>
        </div>
    </div>
    <div class="bg-yellow-300 self-center">
        <h1>
            Let us get you off the board <br>
            <span>Pursue what you wanted</span>
        </h1>
        <div class="mt-2 flex items-center">
            <a href="#" class="block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold">Get started</a>
            <a href="#" class="block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold">Learn more</a>
        </div>
    </div>
    <div class="bg-red-300 self-end">
        <h1>
            Let us get you off the board <br>
            <span>Pursue what you wanted</span>
        </h1>
        <div class="mt-2 flex items-center">
            <a href="#" class="block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold">Get started</a>
            <a href="#" class="block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold">Learn more</a>
        </div>
    </div>
</div>

Benutzeravatar von panjeh
panjeh

Sie haben eine andere Wahl, die Gitter ist und tun kann

<div class="grid justify-items-center items-center h-screen">
  <div>
    <h3>title</h3>
    <button>button</button>
  </div>
</div>

1449370cookie-checkVertikale Ausrichtung mit Tailwind CSS über Vollbild-Div

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy