Er zijn twee methoden om de link te centreren:
- Centreer links in CSS met behulp van de ' tekst-uitlijnen ' eigendom
- Centreer links in CSS met behulp van de ' marge ' eigendom
In dit artikel leggen we beide methoden uit om de link te centreren. Dus laten we beginnen!
Methode 1: Links in CSS centreren met behulp van text-align eigenschap
Om de links in HTML te centreren, gebruiken we de “ tekst-uitlijnen ” eigenschap van CSS. De ' tekst-uitlijnen ” -eigenschap in CSS wordt gebruikt om de uitlijning van tekst aan te passen, zoals links, rechts, gecentreerd en uitlijning uit te rechtvaardigen.
Syntaxis
De syntaxis van de eigenschap text-align is:
tekst-uitlijnen : waarde
In plaats van ' waarde ”, kunt u de uitlijning van tekst instellen, zoals links, rechts, centreren en uitvullen.
Nu gebruiken we de ' tekst-uitlijnen ” om de gegeven links te centreren.
Voorbeeld
Om een link op een webpagina te centreren, voegen we een link in HTML toe in de
-tag. Gebruik hiervoor de -tag om een hyperlink te definiëren en geef het adres van de gewenste site op. Geef daarna de naam van de link op. In ons geval hebben we de link toegevoegd aan onze Linuxhint-website.HTML
< lichaam >< a href = “https://linuxhint.com/” > Linux < / a >
< / lichaam >
De onderstaande afbeelding geeft aan dat de link is toegevoegd die standaard aan de linkerkant staat:
Ga nu naar de CSS om de link te centreren.
Hier gebruiken we ' a ” om toegang te krijgen tot de toegevoegde link. Stel daarna de waarde van text-align in als ' centrum ” en weergegeven als “ blok ”. Als gevolg hiervan wordt het element toegevoegd als een blokelement, beginnend bij een nieuwe regel en de hele breedte in beslag nemend.
CSS
a {tekst-uitlijnen : centrum ;
Scherm : blok ;
}
Opmerking: CSS text-align eigenschap werkt niet alleen om de tag te centreren. Daarom moet u de ' Scherm ” eigenschap en stel de waarde in “ blok ” om de link te centreren.
Ga nu naar de HTML en voer deze uit om het volgende resultaat te zien. Hier kunt u zien dat de link in het midden van de webpagina is uitgelijnd:
Laten we naar de tweede methode gaan om de link in het midden uit te lijnen.
Methode 2: Koppelingen centreren in CSS met behulp van de eigenschap 'marge'
In CSS wordt de ' marge ” eigenschap wordt gebruikt om de link te centreren. Het is de steno-eigenschap van ' marge-links ”, “ marge-rechts ”, “ marge-top ', en ' margin-bottom ' eigendommen. U kunt de waarden van alle gegeven eigenschappen op één regel instellen.
Syntaxis
Syntaxis van marge-eigenschap is:
marge : auto | bovenkant Rechtsaf onderkant linksDe beschrijving van de hierboven verstrekte syntaxis wordt hieronder gegeven:
- auto: Het wordt gebruikt om elementen in te stellen volgens de browser.
- bovenkant: Het wordt gebruikt om de marge vanaf de bovenkant in te stellen.
- Rechtsaf: Het wordt gebruikt om de marge van rechts in te stellen.
- knop: Het wordt gebruikt om de marge vanaf de onderkant in te stellen.
- links: Het wordt gebruikt om de marge van links in te stellen.
Opmerking: Het specificeren van twee waarden betekent de marge van boven en onder en de marge van links en rechts; als er echter één waarde wordt toegevoegd, wordt de marge op alle vier de zijden toegepast.
Laten we naar het voorbeeld gaan, waar we een link centreren met behulp van de ' marge ' eigendom.
Voorbeeld
Stel eerst de waarde van de eigenschap display in als ' blok ” en de breedte als “ 70px ”. Pas daarna de marge-eigenschap toe en stel de waarde in op ' auto ”:
a {Scherm : blok ;
breedte : 70px ;
marge : auto ;
}
Opmerking: De ' Scherm ' en ' breedte ” eigenschap is nodig om in te stellen; anders de ' marge ” eigenschap zal niet werken. De waarde van de eigenschap width kan worden ingesteld op basis van de resolutie van het beeldscherm en de lengte van de tekst.
U kunt aan de gegeven afbeelding zien dat de link met succes is gecentreerd:
Dat is het! We hebben de methoden uitgelegd om de link te centreren.
Conclusie
De ' tekst-uitlijnen ' en ' marge ” eigenschap wordt gebruikt om de link te centreren met de bijdrage van de “ Scherm ' en ' breedte ' eigendom. De eigenschap display is nodig samen met de eigenschap text-align, terwijl bij het gebruik van de eigenschap margin zowel de eigenschappen display als width verplicht zijn om de link te centreren. Deze handleiding heeft verschillende methoden besproken om een link in CSS te centreren.