Es gibt zwei Methoden, um den Link zu zentrieren:
- Zentrieren Sie Links in CSS mit dem „ Textausrichtung ' Eigentum
- Zentrieren Sie Links in CSS mit dem „ Rand ' Eigentum
In diesem Artikel erklären wir beide Methoden, um den Link zu zentrieren. So lass uns anfangen!
Methode 1: Zentrieren Sie Links in CSS mit der text-align-Eigenschaft
Um die Links in HTML zu zentrieren, verwenden wir das „ Textausrichtung ” Eigenschaft von CSS. Das ' Textausrichtung ”-Eigenschaft in CSS wird verwendet, um die Ausrichtung von Text anzupassen, z. B. links, rechts, zentriert und Blocksatz.
Syntax
Die Syntax der Eigenschaft text-align lautet:
Textausrichtung : Wert
Anstelle von ' Wert “, können Sie die Textausrichtung wie links, rechts, zentriert und Blocksatz festlegen.
Jetzt verwenden wir das „ Textausrichtung ” um die gegebenen Links zentriert auszurichten.
Beispiel
Um einen Link auf einer Webseite zu zentrieren, fügen wir einen Link in HTML innerhalb des
-Tags ein. Verwenden Sie dazu das Tag , um einen Hyperlink zu definieren, und geben Sie die Adresse der gewünschten Website an. Geben Sie danach den Namen des Links an. In unserem Fall haben wir den Link zu unserer Linuxhint-Website hinzugefügt.HTML
< Karosserie >< a href = „https://linuxhint.com/“ > Linux < / a >
< / Karosserie >
Das unten bereitgestellte Bild zeigt an, dass der Link hinzugefügt wird, der standardmäßig auf der linken Seite positioniert ist:
Wechseln Sie nun zum CSS, um den Link zu zentrieren.
Hier verwenden wir „ a “, um auf den hinzugefügten Link zuzugreifen. Setzen Sie danach den Wert von text-align auf „ Center “ und als „ Block “. Als Ergebnis wird das Element als Blockelement hinzugefügt, beginnend mit einer neuen Zeile und über die gesamte Breite.
CSS
a {Textausrichtung : Center ;
Anzeige : Block ;
}
Notiz: Die CSS-Textausrichtungseigenschaft funktioniert nicht allein, um das Tag zu zentrieren. Daher müssen Sie das „ Anzeige „Eigenschaft und setze ihren Wert“ Block “, um den Link zu zentrieren.
Wechseln Sie nun zum HTML und führen Sie es aus, um das folgende Ergebnis zu sehen. Hier können Sie sehen, dass der Link in der Mitte der Webseite ausgerichtet ist:
Kommen wir zur zweiten Methode, um den Link in der Mitte auszurichten.
Methode 2: Zentrieren Sie Links in CSS mit der Eigenschaft „margin“.
Im CSS ist das „ Rand ”-Eigenschaft wird verwendet, um den Link zu zentrieren. Es ist die abgekürzte Eigenschaft von „ Rand links “, „ Rand rechts “, „ Rand-oben ', und ' Rand unten ' Eigenschaften. Sie können die Werte aller angegebenen Eigenschaften in einer einzigen Zeile festlegen.
Syntax
Die Syntax der Randeigenschaft lautet:
Rand : Auto | oben Rechts Unterseite linksDie Beschreibung der oben bereitgestellten Syntax ist unten angegeben:
- Auto: Es wird verwendet, um Elemente entsprechend dem Browser zu setzen.
- oben: Es wird verwendet, um den Rand von oben festzulegen.
- Rechts: Es wird verwendet, um den Rand von rechts einzustellen.
- Taste: Es wird verwendet, um den Rand von unten einzustellen.
- links: Es wird verwendet, um den Rand von links einzustellen.
Notiz: Die Angabe von zwei Werten bedeutet den Rand von oben und unten und den Rand von links und rechts; Wenn jedoch ein Wert hinzugefügt wird, wird der Rand auf alle vier Seiten angewendet.
Kommen wir zu dem Beispiel, in dem wir einen Link mit dem „ Rand ' Eigentum.
Beispiel
Legen Sie zunächst den Wert der Anzeigeeigenschaft als „ Block “ und die Breite als „ 70px “. Wenden Sie danach die Margin-Eigenschaft an und setzen Sie ihren Wert auf „ Auto “:
a {Anzeige : Block ;
Breite : 70px ;
Rand : Auto ;
}
Notiz: Das ' Anzeige ' und ' Breite ” Eigenschaft muss festgelegt werden; ansonsten der ' Rand ” Eigenschaft wird nicht funktionieren. Der Wert der Eigenschaft width kann entsprechend der Auflösung des Anzeigebildschirms und der Länge des Textes eingestellt werden.
Sie können anhand des angegebenen Bildes sehen, dass der Link erfolgreich zentriert wurde:
Das ist es! Wir haben die Methoden zum Zentrieren des Links erklärt.
Fazit
Das ' Textausrichtung ' und ' Rand ”-Eigenschaft wird verwendet, um den Link mit dem Beitrag der “ Anzeige ' und ' Breite ' Eigentum. Die display-Eigenschaft ist zusammen mit der text-align-Eigenschaft erforderlich, während bei der Verwendung der margin-Eigenschaft sowohl die display- als auch die width-Eigenschaft obligatorisch sind, um den Link zu zentrieren. In diesem Leitfaden wurden verschiedene Methoden zum Zentrieren eines Links in CSS besprochen.