Mehrere Links in HTML zentrieren
-
Verwenden Sie das HTML-Tag
<center>, um mehrere HTML-Links zu zentrieren -
Verwenden Sie die CSS-Eigenschaft
text-align: center, um mehrere HTML-Links zu zentrieren
Dieser Artikel wird uns beibringen, einen oder mehrere HTML-Links zu zentrieren. In HTML können wir den Link mit dem Tag <a> erstellen und die URL dem Attribut src zuweisen.
Verwenden Sie das HTML-Tag <center>, um mehrere HTML-Links zu zentrieren
Der einfachste Weg, ein Element im HTML zu zentrieren, ist das <center>-Tag. Wir können alle Elemente innerhalb des Tags <center> </center> platzieren, die wir benötigen, um in der Mitte anzuzeigen.
Zum Beispiel haben wir vier Links erstellt und sie in das Tag <center> eingefügt, um in der Mitte zu rendern.
HTML Quelltext:
<center>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
</center>
In der obigen Ausgabe können Benutzer sehen, dass alle Links in der Mitte der Webseite erscheinen.
Verwenden Sie die CSS-Eigenschaft text-align: center, um mehrere HTML-Links zu zentrieren
Wir können die HTML-Elemente auch mit der CSS-Eigenschaft text-align zentrieren.
Im folgenden Beispiel haben wir vier Links erstellt und sie innerhalb des <div>-Elements hinzugefügt. Als nächstes haben wir die CSS-Eigenschaft text-align: center auf das <div>-Element angewendet, wodurch alle <div>-Elemente zentriert werden.
HTML Quelltext:
<div>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
CSS-Code:
div{
text-align: center;
}
Wenn Benutzer alle Links Zeile für Zeile in einer einzigen Spalte anzeigen möchten, können sie die CSS-Eigenschaften display: flex und flex-direction: column für den Stil des <div>-Elements hinzufügen.
HTML Quelltext:
<div>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
CSS-Code:
div{
display: flex;
flex-direction: column;
text-align: center;
}
In der obigen Ausgabe können Benutzer beobachten, dass alle Links in einer einzelnen Spalte angezeigt werden und die Spalte in der Mitte des Bildschirms angezeigt wird.
