Diese Anleitung demonstriert die Vorgehensweise zur horizontalen und vertikalen Ausrichtung mithilfe von CSS.
Wie richtet man mit CSS eine horizontale und vertikale Ausrichtung aus?
Die Entwickler nutzen die „horizontale“ und „vertikale“ Ausrichtung, um Elemente auf einer Webseite übersichtlicher anzuordnen und zu positionieren. Sie können beim Ausrichten von Elementen und Inhalten, beim Positionieren von Schaltflächen oder Symbolen usw. nützlich sein. Befolgen Sie zum besseren Verständnis die folgenden Beispiele:
Horizontale Ausrichtung
In CSS wird die text-align-Eigenschaft verwendet, um Text innerhalb seines übergeordneten Elements horizontal auszurichten. Besuchen Sie zum besseren Verständnis die folgenden Codeausschnitte:
< Körper >
< div Klasse = 'Konto' >
< div Klasse = „leftAlign“ > Linuxhint ist linksbündig < / div >
< div Klasse = „centerAlign“ > Linuxhint ist Center Align < / div >
< div Klasse = „rightAlign“ > Linuxhint ist rechtsbündig < / div >
< / div >
< / Körper >
Im obigen Codeausschnitt:
- Erstens, der Elternteil „ div Das Element wird mit einem Klassenattribut mit dem Wert „ verwendet. Konto “.
- Als nächstes wurden drei untergeordnete Elemente erstellt und jedem Div das Klassenattribut zugewiesen.
- Am Ende werden den Klassen die Werte „leftAlign“, „centerAlign“ und „rightAlign“ bereitgestellt.
Fügen Sie nun die folgenden CSS-Eigenschaften in das Feld „
.leftAlign {
Anzeige : Inline-Block ;
Breite : 30 % ;
Polsterung : 20px ;
Hintergrundfarbe : Waldgrün ;
Textausrichtung : links ;
}
.centerAlign {
Anzeige : Inline-Block ;
Breite : 30 % ;
Hintergrundfarbe : Rot ;
Polsterung : 20px ;
Textausrichtung : Center ;
}
.rightAlign {
Anzeige : Inline-Block ;
Breite : 30 % ;
Hintergrundfarbe : blaugrün ;
Polsterung : 20px ;
Textausrichtung : Rechts ;
}
>
Im obigen Codeblock:
- Zuerst werden alle drei Klassen separat ausgewählt und dann CSS-Eigenschaften angewendet. Anzeige “, „ Breite “, „ Hintergrundfarbe ' Und ' Polsterung ' zu ihnen. Diese Eigenschaften werden zur Verbesserung der Visualisierungszwecke genutzt.
- Als nächstes sind die Werte von „ links “, „ Center ' Und ' Rechts ” werden dem „ zur Verfügung gestellt Textausrichtung ” Eigentum an die „ leftAlign “, „ centerAlign ', Und ' rightAlign ” Klassen bzw.
Nach dem Kompilierungsprozess sehen die HTML-Elemente folgendermaßen aus:
Der obige Schnappschuss des Browsers zeigt, dass die Elemente horizontal an der linken, mittleren und rechten Position ausgerichtet sind.
Vertikale Ausrichtung
Das CSS „ vertikal ausrichten „-Eigenschaft richtet das ausgewählte Element an der „ y-Achse ” innerhalb ihres übergeordneten Elements. Die möglichen Werte für die Eigenschaft „vertikal-align“ sind „ Grundlinie “, „ sub “, „ super “, „ Spitze “, „ Text oben “, „ Mitte “, „ Unterseite ', Und ' Text unten “. Allerdings verwenden die Entwickler beim Erstellen von Webseitendesigns meist die Werte „oben“, „mitte“ und „unten“. Um das ausgewählte HTML-Element an der obersten Position auszurichten, besuchen Sie das folgende Code-Snippet:
< div Klasse = 'zählen' >< Bild src = „hiunsplash.jpg“ Breite = „200px“ Höhe = „200px“ >
< Spanne Klasse = „captionTopAlign“ > Dieser Text wird oben vertikal neben dem Bild ausgerichtet < / Spanne >
< / div >
Im obigen Codeausschnitt:
- Erstellen Sie zunächst ein übergeordnetes Element. div ” Element und weisen Sie einen Wert von „ zu zählen ' zum ' Klasse ” Attribut.
- Verwenden Sie im übergeordneten Container das „
”-Tag und geben Sie den Pfad des Bildes als Wert für das „ src ” Attribut.
- Geben Sie außerdem den Wert „ 200px ” sowohl zu den „ Breite ' Und ' Höhe ” Attribute der „
' Schild.
- Als nächstes verwenden Sie die „ ” Tag und geben Sie ihm eine Klasse von „ captionTopAlign “. Stellen Sie am Ende Dummy-Daten bereit.
Fügen Sie nun CSS-Eigenschaften hinzu, um die HTML-Elemente zu formatieren:
.zählen {Breite : fit-content ;
Anzeige : Block ;
Rand links : 100px ;
Polsterung : 10px ;
Grenze : 2px solide Rot ;
}
.captionTopAlign {
Vertikale
Im obigen Codeblock:
- Wählen Sie zunächst das übergeordnete Element „ zählen „Klasse und stellen Sie dem CSS die Werte „fit-content“, „block“, „100px“, „10px“ und „2px solid red“ zur Verfügung. Breite “, „ Anzeige “, „ Rand links “, „ Polsterung ' Und ' Grenze ' Eigenschaften. Diese Eigenschaften werden zum Formatieren des übergeordneten Elements verwendet.
- Wählen Sie als Nächstes „ captionTopAlign ” Klasse und geben Sie den Wert von „ Spitze „zum CSS“ vertikal ausrichten ' Eigentum. Dadurch wird das HTML-Element an der obersten Position ausgerichtet.
Nach der Ausführung der obigen Codezeilen sieht die Webseite folgendermaßen aus:
Der obige Schnappschuss zeigt, dass das ausgewählte HTML-Element jetzt oben ausgerichtet ist. Auf die gleiche Weise kann das Element in der Mitte, unten usw. ausgerichtet werden.
Abschluss
Für die horizontale und vertikale Ausrichtung ist das „ Textausrichtung ' Und ' vertikal ausrichten „Es werden jeweils CSS-Eigenschaften verwendet. Die Eigenschaft „text-align“ ermöglicht den Wert „ links “, „ Rechts “, „ Center ' Und ' rechtfertigen “. Andererseits sind die möglichen Werte für die Eigenschaft „vertikal ausrichten“ „ Grundlinie “, „ sub “, „ super “, „ Spitze “, „ Text oben “, „ Mitte “, „ Unterseite ', Und ' Text unten “. Die horizontale und vertikale Ausrichtung hilft dabei, saubere und professionelle Webdesigns zu erstellen.