So zentrieren Sie vertikal ein DIV -Element für alle Browser mit CSS

In der Webentwicklung ist es wichtig, das Layout des Elements richtig zu erstellen. Viele CSS -Eigenschaften, wie z. Flexible Box wird verwendet, um Webseiten und Anwendungen auf rekursive Weise anzuordnen. Dieser Flexbox -Modus erstellt Layouts für komplexe Webseiten und Anwendungen.

In diesem Beitrag werden Sie geführt, wie Sie ein DIV -Element für alle Browser mithilfe von CSS vertikal zentrieren können.

So richten Sie das Div -Element mit CSS aus?

Das DIV -Element kann vertikal ausgerichtet werden, indem die Anzeigeeigenschaft verwendet wirdbiegen"Zusammen mit dem CSS"Ausrichtung”Eigentum und“Rechtfertigungsbekämpfung" Eigentum. Die Eigenschaft „Align-items“ übereinstimmt das Element vertikal und die Eigenschaft „Justify-Content“ richtet den Inhalt horizontal aus.

Beispiel: So zentrieren Sie vertikal ein DIV -Element mit CSS?

In HTML zuerst fügen Sie eine "hinzu""Element und zuweisen Sie es der Klasse"Hauptinhalt”. Fügen Sie zwischen den "" -Tags ein "hinzu"Element mit den folgenden Attributen:

• “srcDas Attribut wird verwendet, um die URL des Bildes anzugeben.
• “Alt”Attribut definiert einen Text, der anstelle eines Bildes angezeigt wird, wenn es nicht geladen werden kann.
• “BreiteDas Attribut wird verwendet, um die Breite des Bildes anzupassen.
• Dann fügen Sie das hinzu “

  Element, um den Absatz in die Seite einzubetten.

Hier ist der HTML -Code:

Laptop ist ein tragbarer Computer, der auch als Notebook -Computer bezeichnet wird.

In CSS werden wir mehrere Styling -Eigenschaften für die DIV angeben.

Stil „Hauptkontent“ -Klasse

.Hauptinhalt
Höhe: 50%;
Hintergrundfarbe: #46C2CB;
Schriftgröße: 24px;
Polsterung: 10px;

Die folgenden CSS -Eigenschaften sind in der “definiert“Hauptinhalt" Klasse:

• “HöheEigenschaft wird verwendet, um die Höhe des Behälters anzupassen.
• “Hintergrundfarbe”Definiert die Hintergrundfarbe des Elements.
• “SchriftgrößeGibt die Schriftgröße des Elements an.
• “PolsterungDie Eigenschaft legt Platz um den Inhalt des Elements.

Aus der Ausgabe können Sie feststellen, dass der Inhalt des Div -Elements nicht in der Mitte liegt:

Lassen Sie uns die CSS -Immobilien anwenden, die dazu beitragen, die zu zentrieren”Element vertikal. Fügen Sie diese Eigenschaften der Klasse hinzu "Hauptinhalt”, Die verwendet werden, um auf das Element zuzugreifen:

Anzeige: Flex;
Ausrichtung: Zentrum;

Hier ist die Beschreibung:

• “Anzeige" Eigentum "biegen”Wird verwendet, um das Div -Layout flexibel für sein Element zu machen.
• “Ausrichtung"CSS -Eigenschaft wird als" eingestellt "Center”, Was die Divelemente vertikal ausrichten wird.

Ausgang

Sie haben gelernt, wie man ein Div -Element für alle Browser mit CSS vertikal zentriert.

Abschluss

Ein Divelelement vertikal zentrieren, das CSS “Anzeige"Eigenschaft wird mit dem" verwendet "biegen" Wert. Dieser Wert macht den Behälter flexibel für seine Elemente. Um das DIV -Element vertikal auszurichten, passen Sie das an “anAusrichtung”Eigenschaft und zuweisen Sie es eine“Center" Wert. Dieser Blog hat Ihnen gezeigt, wie Sie CSS verwenden, um in allen Browsern vertikal zentrierte Divisionselemente zu verwenden.