Det er to metoder for å sentrere koblingen:
- Sentrer lenker i CSS ved hjelp av ' tekstjustering ' eiendom
- Sentrer lenker i CSS ved hjelp av ' margin ' eiendom
I denne artikkelen vil vi forklare begge metodene for å sentrere koblingen. Så la oss begynne!
Metode 1: Sentrer koblinger i CSS ved å bruke tekstjusteringsegenskap
For å sentrere lenkene i HTML, bruker vi ' tekstjustering ” eiendom til CSS. « tekstjustering ”-egenskapen i CSS brukes til å justere justeringen av tekst som venstre-, høyre-, senter- og justeringsjustering.
Syntaks
Syntaksen til tekstjusteringsegenskapen er:
tekstjustering : verdi
I stedet for ' verdi ”, kan du angi justering av tekst som venstre, høyre, senter og juster.
Nå vil vi bruke ' tekstjustering ” for å sentrere de gitte koblingene.
Eksempel
For å sentrere en kobling på en nettside, legger vi til en lenke i HTML inne i
-taggen. For å gjøre det, bruk -taggen for å definere en hyperkobling og oppgi adressen til det nødvendige nettstedet. Etter det, spesifiser navnet på lenken. I vårt tilfelle har vi lagt til lenken til vår Linuxhint-nettside.HTML
< kropp >< en href = 'https://linuxhint.com/' > Linux < / en >
< / kropp >
Bildet nedenfor indikerer at lenken er lagt til som er plassert på venstre side som standard:
Gå nå til CSS for å sentrere lenken.
Her vil vi bruke ' en ' for å få tilgang til lenken som er lagt til. Deretter setter du verdien for tekstjustering som ' senter ' og vises som ' blokkere '. Som et resultat vil elementet legges til som et blokkelement, som starter på en ny linje og tar opp hele bredden.
CSS
en {tekstjustering : senter ;
vise : blokkere ;
}
Merk: CSS-tekstjusteringsegenskapen fungerer ikke alene for å sentrere taggen. Derfor må du bruke ' vise ' egenskap og angi verdien ' blokkere ' for å sentrere koblingen.
Gå nå til HTML og kjør den for å se følgende utfall. Her kan du se at koblingen er justert i midten av nettsiden:
La oss gå til den andre metoden for å justere koblingen i midten.
Metode 2: Sentrer koblinger i CSS ved å bruke 'margin'-egenskap
I CSS er ' margin ”-egenskapen brukes til å sentrere lenken. Det er stenoegenskapen til ' marg-venstre ', ' marg-høyre ', ' margin-topp ', og ' marg-bunn ' eiendommer. Du kan angi verdiene for alle de gitte egenskapene på en enkelt linje.
Syntaks
Syntaks for margegenskap er:
margin : auto | topp Ikke sant bunn venstreBeskrivelsen av den ovenfor angitte syntaksen er gitt nedenfor:
- auto: Den brukes til å sette elementer i henhold til nettleseren.
- topp: Den brukes til å angi margen fra toppen.
- Ikke sant: Den brukes til å angi margen fra høyre.
- knapp: Den brukes til å angi margen fra bunnen.
- venstre: Den brukes til å angi margen fra venstre.
Merk: Hvis du spesifiserer to verdier, vil det angi margen fra topp og bunn og margen fra venstre og høyre; men hvis én verdi legges til, vil marginen brukes på alle fire sider.
La oss gå til eksemplet, hvor vi vil sentrere en lenke ved å bruke ' margin ' eiendom.
Eksempel
Sett først verdien til visningsegenskapen som ' blokkere ' og bredden som ' 70 piksler '. Etter det, bruk margegenskapen og sett verdien til ' auto ':
en {vise : blokkere ;
bredde : 70 piksler ;
margin : auto ;
}
Merk: « vise ' og ' bredde ” egenskap er nødvendig å sette; ellers, ' margin ' eiendom vil ikke fungere. Verdien til breddeegenskapen kan stilles inn i henhold til oppløsningen på skjermen og lengden på teksten.
Du kan se fra det gitte bildet at lenken er sentrert vellykket:
Det er det! Vi forklarte metodene for å sentrere lenken.
Konklusjon
« tekstjustering ' og ' margin '-egenskapen brukes til å sentrere koblingen med bidraget til ' vise ' og ' bredde ' eiendom. Visningsegenskapen er nødvendig sammen med tekstjusteringsegenskapen, mens du bruker margegenskapen, er både display- og breddeegenskapene obligatoriske for å sentrere koblingen. Denne veiledningen har diskutert ulike metoder for å sentrere en lenke i CSS.