Ein Beispiel für die vertikale Zentrierung von Unterelementen in Div mithilfe des Flex-Layouts

1. Flex ist die Abkürzung für Flexible Box, was „flexibles Layout“ bedeutet und verwendet wird, um dem Boxmodell maximale Flexibilität zu verleihen. Jeder Container kann als Flex-Layout angegeben werden. Beachten Sie, dass nach dem Festlegen des Flex-Layouts die Eigenschaften „Float“, „Clear“ und „Vertical-Align“ der untergeordneten Elemente ungültig werden.

Elemente, die das Flex-Layout verwenden, werden Flex-Container oder kurz „Container“ genannt. Alle seine untergeordneten Elemente werden automatisch zu Containermitgliedern, sogenannten Flex-Elementen oder kurz „Elementen“. Standardmäßig hat ein Container zwei Achsen: die horizontale Hauptachse und die vertikale Querachse. Die Startposition der Hauptachse (der Schnittpunkt mit der Grenze) wird als Hauptstart und die Endposition als Hauptende bezeichnet; die Startposition der Querachse wird als Querstart und die Endposition als Querende bezeichnet. Standardmäßig werden die Elemente entlang der Hauptachse angeordnet. Der von einem einzelnen Element eingenommene Hauptachsenraum wird als Hauptgröße bezeichnet, und der eingenommene Querachsenraum wird als Quergröße bezeichnet.

Flex-Richtung Flex-Wrap Flex-Flo Inhalt ausrichten Elemente ausrichten Inhalt ausrichten

2. Vertikale Zentrierung von Elementen innerhalb eines Blocks

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Über die vertikale Zentrierung von Elementen</title>
    <Stil>
        html, Text {
            Rand: 0;
            Rand: 0;
            Polsterung: 0;
            Höhe: 100%;
            Breite: 100 %;
        }
 
        .div-main {
            Anzeige: Flex;
            Elemente ausrichten: zentrieren;
            Inhalt ausrichten: zentriert;
            Höhe: 30%;
            Breite: 50%;
            Hintergrund: #00a2d4;
        }
 
        .Unterspanne {
            Rand: automatisch;
            Schriftgröße: xx-groß;
        }
 
    </Stil>
</Kopf>
 
<Text>
 
<div Klasse="div-main">
 
    <span Klasse="Unterspan">
    Die Göttin des Luo-Flusses
</div>
</body>
</html>

Dies ist das Ende dieses Artikels über Beispiele für die vertikale Zentrierung von Unterelementen innerhalb eines Div mithilfe des Flex-Layouts. Weitere Informationen zur vertikalen Zentrierung von Unterelementen innerhalb eines Div mithilfe von Flex finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Verschiedene Methoden zum Implementieren der Eingabeaufforderungsfunktion eines Textfelds in HTML

>>: Analyse der Gründe, warum das MySQL-Indexsystem den B + -Baum verwendet

Ein Beispiel für die vertikale Zentrierung von Unterelementen in Div mithilfe des Flex-Layouts

Lösen Sie das Matching-Problem in CSS

Implementierung von 2D- und 3D-Transformationen in CSS3

So verwenden Sie tcpdump zum Erfassen von Paketen im Linux-System

Detaillierte Erläuterung der Verwendung des Baidu-Stils in Eslint im React-Projekt

Mobile Frontend-Anpassungslösung (Zusammenfassung)

So konvertieren Sie Chinesisch in HTML in UTF-8

Zweistündiges Docker-Einführungstutorial

Linux verwendet join -a1, um zwei Dateien zusammenzuführen

Vue-Bindungsobjekt, Array-Daten können nicht dynamisch gerendert werden – detaillierte Erläuterung

So installieren Sie Nginx an einem bestimmten Ort im Centos-System

Artikel empfehlen

Detaillierte Erklärung von react setState

Windows 10 ist zu schwierig zu verwenden. Wie passen Sie Ihr Ubuntu an?

So installieren Sie Tomcat in Docker und stellen das Springboot-Projekt-War-Paket bereit

CSS-Benennung: BEM, Scoped CSS, CSS-Module und CSS-in-JS erklärt

Detaillierte Erklärung zur korrekten Verwendung der if-Funktion in MySQL

Lernen Sie Node.js von Grund auf

Beispiel, wie nginx dynamische und statische Trennung implementiert

Installation und Verwendung der MySQL MyCat-Middleware

Eine kurze Diskussion über die Lösung von Axios zum Entfernen doppelter Anfragen

HTML Tutorial: Sammlung häufig verwendeter HTML-Tags (4)

Eine kurze Analyse der Unterschiede zwischen „:=“ und „=“ in MySQL

So verwenden Sie den Vue-Filter

Einige Parameterbeschreibungen von Texteingabefeldern im Webdesign

Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen

Verschiedene Möglichkeiten, den Aushöhlungseffekt der CSS3-Maskenebene zu erzielen