Mayroong dalawang paraan upang isentro ang link:
- Igitna ang mga link sa CSS gamit ang “ text-align ” ari-arian
- Igitna ang mga link sa CSS gamit ang “ margin ” ari-arian
Sa artikulong ito, ipapaliwanag namin ang parehong mga paraan upang isentro ang link. Kaya, magsimula tayo!
Paraan 1: Center Links sa CSS Gamit ang Text-align Property
Upang isentro ang mga link sa HTML, gagamitin namin ang ' text-align ” pag-aari ng CSS. Ang ' text-align ” Ang pag-aari sa CSS ay ginagamit upang ayusin ang pagkakahanay ng teksto tulad ng kaliwa, kanan, gitna, at bigyang-katwiran ang pagkakahanay.
Syntax
Ang syntax ng pag-aari ng text-align ay:
text-align : halaga
Sa lugar ng ' halaga ”, maaari mong itakda ang alignment ng text gaya ng kaliwa, kanan, gitna, at justify.
Ngayon, gagamitin natin ang ' text-align ” para i-center ang mga ibinigay na link.
Halimbawa
Upang isentro ang isang link sa isang web page, magdaragdag kami ng link sa HTML sa loob ng tag na
. Upang gawin ito, gamitin ang tag na upang tukuyin ang isang hyperlink at ibigay ang kinakailangang address ng site. Pagkatapos nito, tukuyin ang pangalan ng link. Sa aming kaso, idinagdag namin ang link sa aming website ng Linuxhint.HTML
< katawan >< a href = “https://linuxhint.com/” > Linux < / a >
< / katawan >
Ang larawang ibinigay sa ibaba ay nagpapahiwatig na ang link ay idinagdag na nakaposisyon sa kaliwang bahagi bilang default:
Ngayon lumipat sa CSS upang igitna ang link.
Dito, gagamitin natin ang ' a ” para ma-access ang idinagdag na link. Pagkatapos nito, itakda ang halaga ng text-align bilang ' gitna ” at ipakita bilang “ harangan ”. Bilang resulta, ang elemento ay idaragdag bilang isang block element, na nagsisimula sa isang bagong linya at kumukuha ng buong lapad.
CSS
a {text-align : gitna ;
display : harangan ;
}
Tandaan: Hindi gumagana nang mag-isa ang CSS text-align na property para isentro ang tag. Samakatuwid, dapat mong gamitin ang ' display ' ari-arian at itakda ang halaga nito ' harangan ” para igitna ang link.
Ngayon, lumipat sa HTML at isagawa ito upang makita ang sumusunod na kinalabasan. Dito, makikita mo na ang link ay nakahanay sa gitna ng webpage:
Lumipat tayo sa pangalawang paraan upang ihanay ang link sa gitna.
Paraan 2: Center Links sa CSS Gamit ang 'margin' Property
Sa CSS, ang ' margin ” Ang ari-arian ay ginagamit upang igitna ang link. Ito ay ang shorthand na pag-aari ng ' margin-kaliwa ”, “ margin-right ”, “ margin-top ”, at “ margin-ibaba ' ari-arian. Maaari mong itakda ang mga halaga ng lahat ng ibinigay na katangian sa isang linya.
Syntax
Ang syntax ng margin property ay:
margin : sasakyan | itaas tama ibaba umalisAng paglalarawan ng ibinigay na syntax sa itaas ay ibinigay sa ibaba:
- sasakyan: Ito ay ginagamit upang itakda ang mga elemento ayon sa browser.
- itaas: Ito ay ginagamit upang itakda ang margin mula sa itaas.
- tama: Ito ay ginagamit upang itakda ang margin mula sa kanan.
- pindutan: Ito ay ginagamit upang itakda ang margin mula sa ibaba.
- kaliwa: Ito ay ginagamit upang itakda ang margin mula sa kaliwa.
Tandaan: Ang pagtukoy ng dalawang halaga ay magsasaad ng margin mula sa itaas at ibaba at ang margin mula sa kaliwa at kanan; gayunpaman, kung ang isang halaga ay idinagdag, ang margin ay ilalapat sa lahat ng apat na panig.
Lumipat tayo sa halimbawa, kung saan isentro natin ang isang link gamit ang ' margin ” ari-arian.
Halimbawa
Itakda muna ang halaga ng display property bilang “ harangan 'at ang lapad bilang' 70px ”. Pagkatapos nito, ilapat ang margin property at itakda ang halaga nito sa “ sasakyan ”:
a {display : harangan ;
lapad : 70px ;
margin : sasakyan ;
}
Tandaan: Ang ' display 'at' lapad ” ari-arian ay kinakailangan upang itakda; kung hindi, ang ' margin ” hindi gagana ang ari-arian. Maaaring itakda ang halaga ng width property ayon sa resolution ng display screen at sa haba ng text.
Makikita mo mula sa ibinigay na larawan na matagumpay na nakasentro ang link:
Ayan yun! Ipinaliwanag namin ang mga paraan upang isentro ang link.
Konklusyon
Ang ' text-align 'at' margin 'Ang ari-arian ay ginagamit upang isentro ang link na may kontribusyon ng ' display 'at' lapad ” ari-arian. Ang display property ay kinakailangan kasama ang text-align property, habang ginagamit ang margin property, ang display at width na katangian ay sapilitan na igitna ang link. Tinalakay ng gabay na ito ang iba't ibang paraan upang isentro ang isang link sa CSS.