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

Detaillierte Erklärung zur Verwendung von Rastereigenschaften in CSS

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

Detaillierte Erklärung zur Verwendung von Rastereigenschaften in CSS

So konfigurieren Sie Bash-Umgebungsvariablen in Linux

So starten Sie ein JAR-Paket und führen es unter Linux im Hintergrund aus

Mit HTML+CSS3 implementierte Anmeldeschnittstelle

So implementieren Sie https mit Nginx und OpenSSL

Next.js – Erste Schritte-Tutorial

Der neue TypeScript-Schnellstart-Übungsbericht des Partners Vue

Beispiel für die Verwendung von MRG_MyISAM (MERGE) zur Implementierung einer Abfrage nach der Partitionierung in MySQL

Die Organisation W3C gibt Stilempfehlungen für HTML4

Der gesamte Prozess der Konfiguration von Hive-Metadaten für MySQL

Artikel empfehlen

Lösung für Ubuntu 20.04 Firefox kann keine Videos abspielen (Flash-Plug-In fehlt)

Zusammenfassung der Techniken zur Implementierung komplexer Seitenlayouts mithilfe von Framesets

translate(-50%,-50%) in CSS erzielt horizontalen und vertikalen Zentrierungseffekt

Beispielcode für die Master-Slave-Trennung einer MySQL-Datenbank

Zusammenfassung gängiger Toolbeispiele in MySQL (empfohlen)

3D-Tunneleffekt implementiert durch CSS3

JavaScript-Canvas zum Erzielen von Meteoreffekten

Gründe und Lösungen für die Auswahl des falschen Index durch MySQL

Detaillierte Erklärung des Vue-Lebenszyklus

Detaillierte Erläuterung der Nginx-Upstream-Konfiguration und -Funktion

Lösen Sie das Problem des Ablaufs des TLS-Zertifikats (SSL) von Docker

Mysql-Optimierung Zabbix-Partitionsoptimierung

WeChat Mini-Programm: Position des Videofeuers zufällig

Eine kurze Analyse der MySQL PHP-Syntax

Kann die wiederholbare Leseebene von MySQL Phantomlesevorgänge lösen?