Hur man centrerar länkar i CSS

Det finns två sätt att centrera länken:

• Centrera länkar i CSS med hjälp av ' textjustera ' fast egendom
• Centrera länkar i CSS med hjälp av ' marginal ' fast egendom

I den här artikeln kommer vi att förklara båda metoderna för att centrera länken. Så, låt oss börja!

Metod 1: Centrera länkar i CSS med textjusteringsegenskap

För att centrera länkarna i HTML använder vi ' textjustera ” egendom för CSS. den ' textjustera ”-egenskapen i CSS används för att justera justeringen av text som vänster-, höger-, centrerad och justeringsjustering.

Syntax

Syntaxen för egenskapen text-align är:

I stället för ' värde ”, kan du ställa in justering av text som vänster, höger, centrera och justera.

Nu kommer vi att använda ' textjustera ” för att centrera de givna länkarna.

Exempel

För att centrera en länk på en webbsida lägger vi till en länk i HTML inuti -taggen. För att göra det, använd taggen för att definiera en hyperlänk och ange den önskade webbplatsens adress. Efter det, ange namnet på länken. I vårt fall har vi lagt till länken till vår Linuxhint-webbplats.

Bilden nedan visar att länken har lagts till som är placerad på vänster sida som standard:

Flytta nu till CSS för att centrera länken.

Här kommer vi att använda ' a ” för att komma åt den tillagda länken. Efter det, ställ in värdet för text-align som ' Centrum ' och visas som ' blockera ”. Som ett resultat kommer elementet att läggas till som ett blockelement, som börjar på en ny rad och tar upp hela bredden.

CSS

Notera: CSS text-align-egenskapen fungerar inte ensam för att centrera taggen. Därför måste du använda ' visa ' egendom och ställ in dess värde ' blockera ” för att centrera länken.

Gå nu till HTML och kör den för att se följande resultat. Här kan du se att länken är justerad i mitten av webbsidan:

Låt oss gå till den andra metoden för att justera länken i mitten.

Metod 2: Centrera länkar i CSS med 'marginal'-egenskap

I CSS, ' marginal ” egenskapen används för att centrera länken. Det är förkortningsegenskapen för ' marginal-vänster ”, “ marginal-höger ”, “ marginal-top ', och ' marginal-botten ' egenskaper. Du kan ställa in värdena för alla givna egenskaper på en enda rad.

Syntax

Syntax för marginalegenskap är:

Beskrivningen av den ovan angivna syntaxen ges nedan:

• bil: Den används för att ställa in element enligt webbläsaren.
• topp: Den används för att ställa in marginalen uppifrån.
• höger: Den används för att ställa in marginalen från höger.
• knapp: Den används för att ställa in marginalen från botten.
• vänster: Den används för att ställa in marginalen från vänster.

Notera: Att specificera två värden kommer att beteckna marginalen uppifrån och ner och marginalen från vänster och höger; men om ett värde läggs till kommer marginalen att tillämpas på alla fyra sidorna.

Låt oss gå till exemplet, där vi kommer att centrera en länk med hjälp av ' marginal ' fast egendom.

Exempel

Ställ först in värdet för visningsegenskapen som ' blockera ' och bredden som ' 70 pixlar ”. Efter det, tillämpa marginalegenskapen och ställ in dess värde till ' bil ”:

Notera: den ' visa ' och ' bredd ” egenskap är nödvändig för att ställa in; annars, ' marginal ” egendom kommer inte att fungera. Värdet på width-egenskapen kan ställas in enligt bildskärmens upplösning och längden på texten.

Du kan se från den givna bilden att länken har centrerats framgångsrikt:

Det är allt! Vi förklarade metoderna för att centrera länken.

Slutsats

den ' textjustera ' och ' marginal ' egenskapen används för att centrera länken med bidraget från ' visa ' och ' bredd ' fast egendom. Display-egenskapen är nödvändig tillsammans med text-align-egenskapen, medan du använder egenskapen margin är både display- och width-egenskaperna obligatoriska för att centrera länken. Den här guiden har diskuterat olika metoder för att centrera en länk i CSS.