6 CSS-Tricks zum vertikalen Ausrichten von Inhalt
Sprechen wir über die vertikale Ausrichtung in CSS oder um genauer zu sein, wie dies nicht möglich ist. CSS bietet noch keine offizielle Möglichkeit, Inhalte vertikal innerhalb des Containers zu zentrieren. Es ist ein Problem, das Webentwickler wahrscheinlich überall frustriert hat. Aber nicht zu befürchten, in diesem Beitrag werden wir Ihnen ein paar Tricks zeigen, die Ihnen helfen können den Effekt nachahmen.
Diese Tricks können jedoch Einschränkungen haben und müssen möglicherweise benutze mehr als einen Trick um die Illusion zu vervollständigen. Wenn Sie von einem anderen Trick wissen, teilen Sie uns dies bitte in den Kommentaren mit.
1. Verwenden Sie die absolute Positionierung
Der erste Trick, den wir hier sehen werden, verwendet den Wir setzen zunächst die Position des Containerelements auf relativ, dann setzen wir die Position des untergeordneten Elements auf Um ihn vertikal auszurichten, verschieben Sie die Position des untergeordneten Elements um die Hälfte der Höhe des Containers von oben und ziehen Sie ihn um die Hälfte der Breite des untergeordneten Elements nach oben. Hier ist die Ausgabe: Dieser Trick ist perfekt, wenn nur ein untergeordnetes Element vorhanden ist, andernfalls das CSS3-Transformation hat es leicht gemacht, Inhalte in den Mittelpunkt zu stellen. CSS3 Transformation im Gegensatz zur Angenommen, wir haben dieselbe HTML-Struktur wie die vorhergehende Methode - ein übergeordnetes Element, ein untergeordnetes Element - Beachten Sie jedoch, dass CSS3-Transformationen in Internet Explorer 8 und darunter nicht funktionieren. Möglicherweise möchten Sie eine der anderen Methoden hier als Fallback verwenden. Wir können auch verwenden Dieser Trick eignet sich für den Fall, dass Sie den Container nicht auf eine feste Breite setzen, sondern nur die Breite auf Wenn Sie nur eine einzige Zeile Textinhalt in einem Container haben, können Sie den Text mithilfe von den Text vertikal ausrichten Denken Sie daran, dass dieser Trick nur mit einer einzelnen Textzeile funktioniert. Wenn der Inhalt in zwei oder mehr Zeilen aufgeteilt wird, entspricht der Abstand zwischen den einzelnen Zeilen dem von uns angegebenen Persönlich ist die Verwendung von CSS-Tabelle mein Lieblingstrick beim Anwenden der vertikalen Ausrichtung. Es funktioniert in alten Browsern wie Internet Explorer 8. Diese Methode wird durch Festlegen der Anzeige der Containerelemente ausgeführt Die letzte Methode zur vertikalen Zentrierung ist die Verwendung von Flexbox. Flexbox ist ein neues Modul in CSS3. Es bietet eine einfachere Methode zum Ausrichten von Inhalten. Fügen Sie einfach den Inhalt hinzu, um den Inhalt vertikal in der Flexbox zu zentrieren Beachten Sie, dass einige Browser nur die Teilfunktionen des Flexbox-Moduls unterstützen, z. B. Internet Explorer 10, Safari 6 und Chrome 27 und darunter. Stellen Sie daher, ähnlich wie bei der CSS3-Transformation, sicher, dass der Effekt gut in diesen Browser fällt.Position Eigentum. Du hast zwei absolut. Dies erlaubt uns, es frei über dem Behälter zu platzieren. absolut Die Position wirkt sich auf das andere Element im selben Container aus.2. Verwenden Sie die CSS3-Transformation
Position Diese Eigenschaft wirkt sich nicht auf die Position anderer Elemente im selben Container aus.50% von oben und die Verwendung der CSS-Transformation ergibt eine Übersetzung von -50%. Und da hast du es.3. Verwenden Sie Polsterung
Polsterung eine Illusion der vertikalen Ausrichtung schaffen. Stellen Sie dazu einfach die obere und untere Polsterung wie folgt ein:Auto.4. Verwenden Sie die Zeilenhöhe
Zeilenhöhe Eigentum. Stellen Sie das ein Zeilenhöhe Wert für etwa gleich der Containerhöhe, und die folgende Ausgabe wird angezeigt.Zeilenhöhe, uns zu viel Whitespace geben.5. Verwenden Sie die CSS-Tabelle
Tabelle, während das untergeordnete Element als angezeigt werden soll Tabellenzelle dann verwenden Sie die vertikal ausrichten Eigenschaft, um Text vertikal zu zentrieren.6. Verwenden Sie Flexbox
Ausrichten-Elemente: Mitte; wie folgt und das ist es.
