Linkin keskittämiseen on kaksi tapaa:
- Keskitä linkit CSS:ään käyttämällä ' tekstin tasaus ” omaisuutta
- Keskitä linkit CSS:ään käyttämällä ' marginaali ” omaisuutta
Tässä artikkelissa selitämme molemmat menetelmät linkin keskittämiseksi. Joten, aloitetaan!
Tapa 1: Keskitä linkit CSS:ssä käyttämällä tekstin tasausominaisuutta
Keskittääksemme linkit HTML-kieleen, käytämme ' tekstin tasaus ” CSS:n omaisuutta. ' tekstin tasaus ” -ominaisuutta CSS:ssä käytetään säätämään tekstin tasausta, kuten vasemmalle, oikealle, keskelle ja tasausta.
Syntaksi
Tekstin tasausominaisuuden syntaksi on:
tekstin tasaus : arvo
'' arvo ”, voit asettaa tekstin tasauksen, kuten vasemmalle, oikealle, keskelle ja tasauksen.
Nyt käytämme ' tekstin tasaus ” kohdistaaksesi annetut linkit keskelle.
Esimerkki
Keskittääksemme linkin verkkosivulle lisäämme linkin HTML-muodossa
-tunnisteen sisään. Määritä hyperlinkki -tunnisteen avulla ja anna vaaditun sivuston osoite. Määritä sen jälkeen linkin nimi. Meidän tapauksessamme olemme lisänneet linkin Linuxhint-verkkosivustollemme.HTML
< kehon >< a href = 'https://linuxhint.com/' > Linux < / a >
< / kehon >
Alla oleva kuva osoittaa, että linkki on lisätty, joka on oletuksena vasemmalla:
Siirry nyt CSS:ään keskittääksesi linkin.
Tässä käytämme ' a ' päästäksesi lisättyyn linkkiin. Aseta sen jälkeen tekstin tasauksen arvoksi ' keskusta ' ja näytä muodossa ' lohko ”. Tämän seurauksena elementti lisätään lohkoelementiksi, joka alkaa uudelta riviltä ja ottaa koko leveyden.
CSS
a {tekstin tasaus : keskusta ;
näyttö : lohko ;
}
merkintä: CSS-tekstin tasausominaisuus ei toimi yksin tunnisteen keskittämiseksi. Siksi sinun on käytettävä ' näyttö 'omaisuus ja aseta sen arvo' lohko ' keskittääksesi linkin.
Siirry nyt HTML-koodiin ja suorita se nähdäksesi seuraavan tuloksen. Tässä näet, että linkki on kohdistettu verkkosivun keskelle:
Siirrytään toiseen tapaan kohdistaa linkki keskelle.
Tapa 2: Keskitä linkit CSS:ään marginaaliominaisuuden avulla
CSS:ssä ' marginaali '-omaisuutta käytetään linkin keskittämiseen. Se on sanan ' marginaali vasen ”, “ marginaali-oikea ”, “ marginaali yläosa ”, ja ” marginaali-ala ” ominaisuuksia. Voit asettaa kaikkien annettujen ominaisuuksien arvot yhdelle riville.
Syntaksi
Marginaaliomaisuuden syntaksi on:
marginaali : auto | alkuun oikein pohja vasemmalleYllä olevan syntaksin kuvaus on alla:
- auto: Sitä käytetään elementtien asettamiseen selaimen mukaan.
- alkuun: Sitä käytetään marginaalin asettamiseen ylhäältä.
- oikein: Sitä käytetään marginaalin asettamiseen oikealta.
- painike: Sitä käytetään marginaalin asettamiseen alhaalta.
- vasemmalle: Sitä käytetään marginaalin asettamiseen vasemmalta.
merkintä: Kahden arvon määrittäminen merkitsee marginaalia ylhäältä ja alhaalta ja marginaalia vasemmalta ja oikealta; Jos kuitenkin lisätään yksi arvo, marginaalia sovelletaan kaikille neljälle sivulle.
Siirrytään esimerkkiin, jossa keskitetään linkki käyttämällä ' marginaali ” omaisuutta.
Esimerkki
Aseta ensin näytön ominaisuuden arvoksi ' lohko ' ja leveys ' 70 pikseliä ”. Käytä sen jälkeen marginaaliominaisuutta ja aseta sen arvoksi ' auto ':
a {näyttö : lohko ;
leveys : 70 pikseliä ;
marginaali : auto ;
}
merkintä: ' näyttö ' ja ' leveys ” ominaisuus on asetettava; muuten ' marginaali ”omaisuus ei toimi. Leveysominaisuuden arvo voidaan asettaa näytön resoluution ja tekstin pituuden mukaan.
Näet annetusta kuvasta, että linkki on keskitetty onnistuneesti:
Se siitä! Selitimme menetelmät linkin keskittämiseksi.
Johtopäätös
' tekstin tasaus ' ja ' marginaali '-ominaisuutta käytetään linkin keskittämiseen '' näyttö ' ja ' leveys ” omaisuutta. Näyttöominaisuus on välttämätön tekstin tasausominaisuuden kanssa, kun taas marginaaliominaisuutta käytettäessä sekä näyttö- että leveysominaisuudet ovat pakollisia linkin keskittämiseksi. Tässä oppaassa on käsitelty erilaisia tapoja keskittää linkki CSS:ään.