Bei der Webentwicklung ist es entscheidend, das Layout des Elements richtig zu erstellen. Viele CSS-Eigenschaften, wie z. B. CSS3 Flexible Box, sind jedoch nützlich, um das Layout von Webseiten und HTML-Elementen anzupassen. Flexible Box wird verwendet, um Webseiten und Anwendungen rekursiv anzuordnen. Dieser Flexbox-Modus hilft beim Erstellen von Layouts für komplexe Webseiten und Anwendungen.
In diesem Beitrag erfahren Sie, wie Sie ein div-Element für alle Browser vertikal zentrieren, die CSS verwenden.
Wie richtet man div-Elemente mit CSS aus?
Das div-Element kann vertikal ausgerichtet werden, indem die Anzeigeeigenschaft „ biegen ” zusammen mit dem CSS “ Ausrichtungselemente „Eigentum und“ rechtfertigen-Inhalt ' Eigentum. Die Eigenschaft „align-items“ richtet das Element vertikal aus, die Eigenschaft „justify-content“ richtet den Inhalt horizontal aus.
Beispiel: Wie zentriert man ein div-Element mit CSS vertikal?
Fügen Sie in HTML zuerst ein „ Hier ist der HTML-Code: In CSS geben wir dem div mehrere Styling-Eigenschaften an. Stil „Hauptinhalt“-Klasse Die folgenden CSS-Eigenschaften sind im „ Hauptinhalt ' Klasse: An der Ausgabe können Sie erkennen, dass der Inhalt des div-Elements nicht in der Mitte steht: Lassen Sie uns fortfahren, um die CSS-Eigenschaften anzuwenden, die helfen, das „ Hier ist die Beschreibung: Ausgabe Sie haben gelernt, wie Sie ein div-Element für alle Browser mit CSS vertikal zentrieren. Um ein div-Element vertikal zu zentrieren, muss das CSS „ Anzeige ” Eigentum wird mit dem “ biegen ' Wert. Dieser Wert macht den
< Bild Quelle = '/images/laptop-notizblock.jpg' alles = 'Laptop mit Notizblock und Stift' Breite = '300' >
< p > Laptop ist auch als tragbarer Computer bekannt als ein Notebook-Computer. p >
div >
Höhe: fünfzig % ;
Hintergrundfarbe: #46C2CB;
Schriftgröße: 24px;
Polsterung: 10px;
}
Ausrichtungselemente: Mitte;
Fazit