Yra du būdai centruoti nuorodą:
- Centruokite nuorodas CSS naudodami „ teksto lygiavimas ' nuosavybė
- Centruokite nuorodas CSS naudodami „ marža ' nuosavybė
Šiame straipsnyje paaiškinsime abu būdus, kaip centruoti nuorodą. Taigi, pradėkime!
1 būdas: Centruokite nuorodas CSS naudodami teksto lygiavimo ypatybę
Norėdami centruoti nuorodas HTML, naudosime „ teksto lygiavimas “ CSS nuosavybė. „ teksto lygiavimas CSS ypatybė naudojama teksto lygiavimui reguliuoti, pvz., kairėje, dešinėje, centre ir lygiuoti.
Sintaksė
Teksto lygiavimo ypatybės sintaksė yra tokia:
teksto lygiavimas : vertė
Vietoje ' vertė “, galite nustatyti teksto lygiavimą, pvz., kairėje, dešinėje, centre ir lygiuoti.
Dabar mes naudosime „ teksto lygiavimas “, kad sulygiuotumėte nurodytas nuorodas centre.
Pavyzdys
Norėdami centruoti nuorodą tinklalapyje, įtrauksime nuorodą HTML į žymą
. Norėdami tai padaryti, naudokite žymą , kad apibrėžtumėte hipersaitą ir nurodytumėte reikiamą svetainės adresą. Po to nurodykite nuorodos pavadinimą. Mūsų atveju mes įtraukėme nuorodą į mūsų „Linuxhint“ svetainę.HTML
< kūnas >< a href = „https://linuxhint.com/“ > Linux < / a >
< / kūnas >
Toliau pateiktame paveikslėlyje nurodoma, kad nuoroda yra pridėta, kuri pagal numatytuosius nustatymus yra kairėje:
Dabar pereikite prie CSS, kad centre būtų nuoroda.
Čia mes naudosime „ a “, kad pasiektumėte pridėtą nuorodą. Po to nustatykite teksto lygiavimo reikšmę kaip ' centras “ ir rodyti kaip „ blokas “. Dėl to elementas bus įtrauktas kaip blokinis elementas, pradedant nuo naujos eilutės ir užimant visą plotį.
CSS
a {teksto lygiavimas : centras ;
ekranas : blokas ;
}
Pastaba: CSS teksto lygiavimo ypatybė neveikia viena, kad būtų centruojama žyma. Todėl turite naudoti „ ekranas 'ypatybę ir nustatykite jos vertę' blokas “, kad centre būtų nuoroda.
Dabar pereikite prie HTML ir paleiskite jį, kad pamatytumėte tokį rezultatą. Čia galite pamatyti, kad nuoroda išlygiuota tinklalapio centre:
Pereikime prie antrojo metodo, kad sulygiuotume nuorodą centre.
2 metodas: Centruokite nuorodas CSS naudodami „maržos“ ypatybę
CSS sistemoje „ marža “ nuosavybė naudojama nuorodai centruoti. Tai stenografinė savybė paraštė-kairė “, „ paraštė-dešinė “, „ paraštė-viršus “ ir „ paraštė-apačia “ savybes. Visų nurodytų savybių reikšmes galite nustatyti vienoje eilutėje.
Sintaksė
Maržos savybės sintaksė yra tokia:
marža : automatinis | viršuje teisingai apačioje palikoAukščiau pateiktos sintaksės aprašymas pateikiamas toliau:
- automatinis: Jis naudojamas elementams nustatyti pagal naršyklę.
- viršuje: Jis naudojamas paraštėms nustatyti iš viršaus.
- dešinėje: Jis naudojamas norint nustatyti paraštę iš dešinės.
- mygtukas: Jis naudojamas paraštėms nustatyti iš apačios.
- liko: Jis naudojamas paraštėms nustatyti iš kairės.
Pastaba: Nurodę dvi reikšmes, paraštės iš viršaus ir apačios, o paraštės iš kairės ir dešinės; tačiau jei pridedama viena vertė, paraštė bus taikoma visoms keturioms pusėms.
Pereikime prie pavyzdžio, kuriame centruosime nuorodą naudodami „ marža ' nuosavybė.
Pavyzdys
Pirmiausia nustatykite rodymo ypatybės vertę kaip „ blokas “ ir plotis kaip „ 70 piks “. Po to pritaikykite maržos ypatybę ir nustatykite jos vertę į „ automatinis “:
a {ekranas : blokas ;
plotis : 70 piks ;
marža : automatinis ;
}
Pastaba: „ ekranas “ ir „ plotis ” būtina nustatyti savybę; kitu atveju „ marža “ nuosavybė neveiks. Pločio ypatybės reikšmę galima nustatyti pagal ekrano skiriamąją gebą ir teksto ilgį.
Iš pateikto paveikslėlio matote, kad nuoroda sėkmingai įcentruota:
Viskas! Mes paaiškinome nuorodos centravimo būdus.
Išvada
„ teksto lygiavimas “ ir „ marža ypatybė naudojama nuorodai centruoti su ekranas “ ir „ plotis ' nuosavybė. Rodymo ypatybė būtina kartu su teksto lygiavimo ypatybe, o naudojant paraštės ypatybę, norint centruoti nuorodą, tiek rodymo, tiek pločio savybės yra privalomos. Šiame vadove aptariami įvairūs nuorodos centravimo CSS sistemoje būdai.