Hvordan du sentrerer lenker i CSS

Ethvert element vi legger til i HTML vises i øverste venstre hjørne av skjermen som standard. Selv om du kan endre standardposisjonen til et element ved å bruke forskjellige CSS -egenskaper. Tilsvarende, når vi legger til en lenke, vises den i standardposisjonen, men du kan midtre i samsvar med CSS -egenskapene.

Det er to metoder for å sentrere lenken:

• Senterkoblinger i CSS ved å bruke “Tekstalign”Eiendom
• Senterkoblinger i CSS ved å bruke “margin”Eiendom

I denne artikkelen vil vi forklare begge metodene for å sentrere lenken. Så la oss starte!

Metode 1: Senterkoblinger i CSS ved hjelp av tekst-justerte egenskaper

For å sentrere koblingene i HTML, vil vi bruke "Tekstalign”Eiendom til CSS. “Tekstalign”Eiendom i CSS brukes til å justere justeringen av tekst som venstre, høyre, sentrum og rettferdiggjøre justering.

Syntaks

Syntaksen til den tekstjusterte egenskapen er:

Tekstalign: Verdi

I stedet for “verdi”, Kan du angi justering av tekst som venstre, høyre, sentrum og rettferdiggjøre.

Nå vil vi bruke “Tekstalign”For å senter justere de gitte koblingene.

Eksempel

For å sentrere en lenke på en webside, vil vi legge til en lenke i HTML inne i taggen. For å gjøre det, bruk taggen til å definere en hyperkobling og gi den nødvendige nettstedets adresse. Etter det, spesifiser navnet på lenken. I vårt tilfelle har vi lagt til lenken til Linuxhint -nettstedet vårt.

Html

Linuxhint

Det undervernede bildet 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 den ekstra lenken. Etter det, sett verdien av tekst-align som “senter”Og vis som“blokkere”. Som et resultat vil elementet bli lagt til som et blokkelement, starte på en ny linje og ta opp hele bredden.

CSS

en
tekst-align: sentrum;
Display: Block;

Merk: CSS Text-Align-egenskap fungerer ikke alene for å sentrere taggen. Derfor må du bruke "vise”Eiendom og angi verdien”blokkere”For å sentrere lenken.

Gå nå til HTML og utfør den for å se følgende utfall. Her kan du se at lenken er justert i midten av nettsiden:

La oss gå til den andre metoden for å justere lenken i sentrum.

Metode 2: Senterkoblinger i CSS ved å bruke "margin" -egenskaper

I CSS, “margin”Eiendom brukes til å sentrere lenken. Det er den korte eiendommen til “margin-venstre”,“margin-høyre”,“margin-topp”, Og“marginbunn" egenskaper. Du kan angi verdiene til alle de gitte egenskapene i en enkelt linje.

Syntaks

Syntaks for marginegenskap er:

Margin: Auto | Øverst til høyre nederst til venstre

Beskrivelsen av den ovennevnte syntaks er gitt nedenfor:

• Auto: Det brukes til å stille inn elementer i henhold til nettleseren.
• topp: Det brukes til å sette marginen fra toppen.
• Ikke sant: Det brukes til å sette marginen fra høyre.
• knapp: Det brukes til å sette marginen fra bunnen.
• venstre: Det brukes til å sette marginen fra venstre.

Merk: Å spesifisere to verdier vil indikere marginen fra topp og bunn og margin fra venstre og høyre; Imidlertid, hvis en verdi legges til, vil marginen bli brukt på alle fire sider.

La oss flytte til eksemplet, der vi vil sentrere en lenke ved hjelp av "margin”Eiendom.

Eksempel

Sett først verdien av displayegenskapen som "blokkere”Og bredden som“70px”. Etter det, bruk marginegenskapen og setter verdien til “bil”:

en
Display: Block;
Bredde: 70px;
Margin: Auto;

Merk: “vise”Og“bredde”Eiendom er nødvendig for å angi; Ellers "margin”Eiendom fungerer ikke. Verdien på breddeegenskapen kan settes i henhold til oppløsningen på skjermbildet og lengden på teksten.

Du kan se fra det gitte bildet at lenken er sentrert med hell:

Det er det! Vi forklarte metodene for å sentrere lenken.

Konklusjon

“Tekstalign”Og“margin”Eiendom brukes til å sentrere koblingen med bidraget fra“vise”Og“bredde”Eiendom. Displayegenskapen er nødvendig sammen med den tekstjusterte egenskapen, mens du bruker marginegenskapen, er både display- og breddeegenskapene obligatoriske for å sentrere lenken. Denne guiden har diskutert forskjellige metoder for å sentrere en lenke i CSS.