Der er to metoder til at centrere linket:
- Center links i CSS ved hjælp af ' tekstjustering ” ejendom
- Center links i CSS ved hjælp af ' margen ” ejendom
I denne artikel vil vi forklare begge metoder til at centrere linket. Så lad os starte!
Metode 1: Centrer links i CSS ved hjælp af tekstjusteringsegenskab
For at centrere links i HTML, vil vi bruge ' tekstjustering ” ejendom af CSS. Det ' tekstjustering ” egenskaben i CSS bruges til at justere justeringen af tekst såsom venstre-, højre-, center- og justeringsjustering.
Syntaks
Syntaksen for egenskaben tekstjustering er:
tekstjustering : værdi
I stedet for ' værdi ”, kan du indstille justeringen af tekst såsom venstre, højre, centreret og juster.
Nu vil vi bruge ' tekstjustering ” for at centrere de givne links.
Eksempel
For at centrere et link på en webside tilføjer vi et link i HTML inde i
-tagget. For at gøre det skal du bruge -tagget til at definere et hyperlink og angive det påkrævede websteds adresse. Angiv derefter navnet på linket. I vores tilfælde har vi tilføjet linket til vores Linuxhint-websted.HTML
< legeme >< -en href = 'https://linuxhint.com/' > Linux < / -en >
< / legeme >
Billedet nedenfor angiver, at linket er tilføjet, som er placeret på venstre side som standard:
Flyt nu til CSS for at centrere linket.
Her vil vi bruge ' -en ” for at få adgang til det tilføjede link. Indstil derefter værdien for tekstjustering som ' centrum ' og vises som ' blok ”. Som et resultat vil elementet blive tilføjet som et blokelement, der starter ved en ny linje og optager hele bredden.
CSS
-en {tekstjustering : centrum ;
Skærm : blok ;
}
Bemærk: CSS-tekstjusteringsegenskaben fungerer ikke alene til at centrere tagget. Derfor skal du bruge ' Skærm ' egenskab og indstil dens værdi ' blok ” for at centrere linket.
Flyt nu til HTML og kør den for at se følgende resultat. Her kan du se, at linket er justeret i midten af websiden:
Lad os gå til den anden metode til at justere linket i midten.
Metode 2: Centrer links i CSS ved hjælp af 'margin'-egenskab
I CSS er ' margen ” egenskaben bruges til at centrere linket. Det er stenografiegenskaben af ' margin-venstre ', ' margin-højre ', ' margin-top ', og ' margin-bund ' ejendomme. Du kan indstille værdierne for alle de givne egenskaber på en enkelt linje.
Syntaks
Syntaks for marginegenskab er:
margen : auto | top ret bund venstreBeskrivelsen af den ovenfor angivne syntaks er givet nedenfor:
- auto: Det bruges til at indstille elementer i henhold til browseren.
- top: Den bruges til at indstille margenen fra toppen.
- ret: Den bruges til at indstille margenen fra højre.
- knap: Den bruges til at indstille margenen fra bunden.
- venstre: Den bruges til at indstille margenen fra venstre.
Bemærk: Angivelse af to værdier vil angive margenen fra top og bund og margen fra venstre og højre; Hvis der tilføjes én værdi, vil marginen dog blive anvendt på alle fire sider.
Lad os gå til eksemplet, hvor vi vil centrere et link ved hjælp af ' margen ” ejendom.
Eksempel
Indstil først værdien af visningsegenskaben som ' blok ' og bredden som ' 70 px ”. Anvend derefter margenegenskaben og indstil dens værdi til ' auto ”:
-en {Skærm : blok ;
bredde : 70 px ;
margen : auto ;
}
Bemærk: Det ' Skærm ' og ' bredde ” egenskab er nødvendigt at indstille; ellers vil ' margen ” ejendom vil ikke fungere. Værdien af egenskaben bredde kan indstilles i henhold til opløsningen på skærmen og længden af teksten.
Du kan se fra det givne billede, at linket er centreret med succes:
Det er det! Vi forklarede metoderne til at centrere linket.
Konklusion
Det ' tekstjustering ' og ' margen egenskaben bruges til at centrere linket med bidraget fra Skærm ' og ' bredde ” ejendom. Visningsegenskaben er nødvendig sammen med tekstjusteringsegenskaben, mens du bruger marginegenskaben, er både display- og breddeegenskaberne obligatoriske for at centrere linket. Denne guide har diskuteret forskellige metoder til at centrere et link i CSS.