Mehrere Links in HTML 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.