So zentrieren Sie Links in CSS

Jedes Element, das wir in HTML hinzufügen, wird standardmäßig in der oberen linken Ecke des Bildschirms angezeigt. Sie können jedoch die Standardposition eines Elements ändern, indem Sie verschiedene CSS -Eigenschaften verwenden. Wenn wir einen Link hinzufügen, wird er in seiner Standardposition angezeigt. Sie können sie jedoch mit den CSS -Eigenschaften ausrichten.

Es gibt zwei Methoden, um den Link zu zentrieren:

• Center -Links in CSS mit der “Textausrichtung" Eigentum
• Center -Links in CSS mit der “Rand" Eigentum

In diesem Artikel werden wir beide Methoden erläutern, um den Link zu zentrieren. So lass uns anfangen!

Methode 1: Mittelverbindungen in CSS mithilfe der Text-Align-Eigenschaft

Um die Links in HTML zu zentrieren, werden wir die „verwenden“TextausrichtungEigentum von CSS. Der "TextausrichtungDie Eigenschaft in CSS wird verwendet, um die Ausrichtung des Textes wie links, rechts, Mitte anzupassen und die Ausrichtung zu rechtfertigen.

Syntax

Die Syntax der text-align-Eigenschaft lautet:

Text-Align: Wert

Anstelle von "Wert”, Sie können die Ausrichtung des Textes wie links, rechts, zentral und rechtfertigen festlegen.

Jetzt werden wir das verwenden “TextausrichtungUm die angegebenen Links auszurichten, um die angegebenen Links auszurichten.

Beispiel

Um einen Link auf einer Webseite zu zentrieren, fügen wir einen Link in HTML im Tag hinzu. Verwenden Sie dazu das Tag, um einen Hyperlink zu definieren und die Adresse der erforderlichen Site anzugeben. Geben Sie danach den Namen des Links an. In unserem Fall haben wir den Link zu unserer LinuxHint -Website hinzugefügt.

Html

LinuxHint

Das folgende Bild zeigt an, dass die Verbindung hinzugefügt wird, die standardmäßig auf der linken Seite positioniert ist:

Gehen Sie nun zum CSS, um den Link zu zentrieren.

Hier werden wir verwenden “A”Um auf den hinzugefügten Link zuzugreifen. Setzen Sie danach den Wert von Text-Align als "Center"Und anzeigen als"Block”. Infolgedessen wird das Element als Blockelement hinzugefügt, beginnend in einer neuen Zeile und die gesamte Breite aufnehmen.

CSS

A
Text-Align: Mitte;
Bildschirmsperre;

Notiz: CSS Text-Align-Eigenschaft funktioniert nicht alleine, um das Tag zu zentrieren. Daher müssen Sie das verwenden “Anzeige"Eigenschaft und setzen Sie ihren Wert"Block”Um den Link zu zentrieren.

Wechseln Sie nun zum HTML und führen Sie sie aus, um das folgende Ergebnis zu sehen. Hier können Sie sehen, dass der Link im Zentrum der Webseite ausgerichtet ist:

Übergehen wir zur zweiten Methode, um die Verbindung in der Mitte auszurichten.

Methode 2: Mittelverbindungen in CSS unter Verwendung der Eigenschaft „Margin“

In CSS, die “RandEigenschaften werden verwendet, um den Link zu zentrieren. Es ist das Kurzeigeneignis von “links","Randrecht","Rand", Und "Randboden" Eigenschaften. Sie können die Werte aller gegebenen Eigenschaften in einer einzigen Zeile festlegen.

Syntax

Syntax der Margin -Eigenschaft lautet:

Rand: Auto | oben rechts unten links

Die Beschreibung der obigen bereitgestellten Syntax ist unten angegeben:

• Auto: Es wird verwendet, um Elemente gemäß dem Browser festzulegen.
• Spitze: Es wird verwendet, um den Rand von oben zu setzen.
• Rechts: Es wird verwendet, um den Rand von rechts einzustellen.
• Taste: Es wird verwendet, um den Rand von unten zu setzen.
• links: Es wird verwendet, um den Rand von links festzulegen.

Notiz: Das Angeben 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 die Marge auf alle vier Seiten angewendet.

Wechseln wir zum Beispiel, in dem wir einen Link mit der "zentrieren werden"Rand" Eigentum.

Beispiel

Setzen 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
Bildschirmsperre;
Breite: 70px;
Rand: Auto;

Notiz: Der "Anzeige" Und "Breite”Eigentum ist erforderlich, um festzulegen; ansonsten der "RandEigentum funktioniert nicht. Der Wert der Breite Eigenschaft kann gemäß der Auflösung des Anzeigebildschirms und der Länge des Textes festgelegt werden.

Sie können aus dem angegebenen Bild sehen, dass der Link erfolgreich zentriert ist:

Das ist es! Wir haben die Methoden erklärt, um den Link zu zentrieren.

Abschluss

Der "Textausrichtung" Und "RandImmobilien werden verwendet, um den Zusammenhang mit dem Beitrag der zu zentrierenAnzeige" Und "Breite" Eigentum. Die Anzeigeeigenschaft ist zusammen mit der Eigenschaft zur text-alignischen Eigenschaft erforderlich, während die Eigenschaften der Margin-Eigenschaft sowohl die Anzeige- als auch die Breiteneigenschaften verpflichtet sind, die Verbindung zu zentrieren. In diesem Leitfaden wurden verschiedene Methoden erörtert, um einen Link in CSS zu zentrieren.