Obstajata dva načina za centriranje povezave:
- Centrirajte povezave v CSS z uporabo » poravnava besedila ” lastnina
- Centrirajte povezave v CSS z uporabo » marža ” lastnina
V tem članku bomo razložili oba načina za centriranje povezave. Torej, začnimo!
1. način: Centrirajte povezave v CSS z uporabo lastnosti poravnave besedila
Za centriranje povezav v HTML bomo uporabili » poravnava besedila ” last CSS. ' poravnava besedila ” Lastnost v CSS se uporablja za prilagoditev poravnave besedila, kot so leva, desna, sredinska in poravnava.
Sintaksa
Sintaksa lastnosti text-align je:
poravnava besedila : vrednost
Na mestu ' vrednost «, lahko nastavite poravnavo besedila, kot je levo, desno, sredinsko in poravnano.
Zdaj bomo uporabili ' poravnava besedila ”, da dane povezave poravnate na sredino.
Primer
Za centriranje povezave na spletni strani bomo dodali povezavo v HTML znotraj oznake
. To storite tako, da z oznako določite hiperpovezavo in podate zahtevani naslov spletnega mesta. Po tem določite ime povezave. V našem primeru smo dodali povezavo do našega spletnega mesta Linuxhint.HTML
< telo >< a href = “https://linuxhint.com/” > Linux < / a >
< / telo >
Spodnja slika kaže, da je dodana povezava, ki je privzeto postavljena na levi strani:
Zdaj se premaknite na CSS, da postavite povezavo na sredino.
Tukaj bomo uporabili ' a ” za dostop do dodane povezave. Po tem nastavite vrednost text-align kot ' center « in prikaže kot » blok ”. Posledično bo element dodan kot blok element, ki se začne v novi vrstici in zavzame celotno širino.
CSS
a {poravnava besedila : center ;
zaslon : blok ;
}
Opomba: Lastnost poravnave besedila CSS ne deluje sama za centriranje oznake. Zato morate uporabiti ' zaslon ' lastnost in nastavite njeno vrednost ' blok ” za sredinsko povezavo.
Zdaj se premaknite na HTML in ga izvedite, da vidite naslednji rezultat. Tukaj lahko vidite, da je povezava poravnana na sredini spletne strani:
Pojdimo na drugo metodo za poravnavo povezave v sredini.
2. način: Centrirajte povezave v CSS z uporabo lastnosti »margin«.
V CSS je » marža Lastnost ” se uporabi za centriranje povezave. To je stenografska lastnost ' rob-levo ”, “ margin-desno ”, “ margin-top «, in » margin-bottom ” lastnosti. Vrednosti vseh danih lastnosti lahko nastavite v eni vrstici.
Sintaksa
Sintaksa lastnosti marže je:
marža : avto | vrh prav dno levoOpis zgoraj podane sintakse je podan spodaj:
- avto: Uporablja se za nastavitev elementov glede na brskalnik.
- vrh: Uporablja se za nastavitev roba od zgoraj.
- prav: Uporablja se za nastavitev roba z desne.
- gumb: Uporablja se za nastavitev roba od spodaj.
- levo: Uporablja se za nastavitev roba z leve.
Opomba: Določanje dveh vrednosti bo pomenilo rob od zgoraj in spodaj ter rob od leve in desne; če pa je dodana ena vrednost, bo marža uporabljena na vseh štirih straneh.
Pojdimo na primer, kjer bomo centrirali povezavo z uporabo ' marža ” lastnina.
Primer
Najprej nastavite vrednost lastnosti prikaza kot ' blok « in širino kot » 70 slikovnih pik ”. Po tem uporabite lastnost roba in nastavite njeno vrednost na ' avto ”:
a {zaslon : blok ;
premer : 70 slikovnih pik ;
marža : avto ;
}
Opomba: ' zaslon « in » premer ” lastnost je treba nastaviti; sicer pa ' marža ” Lastnost ne bo delovala. Vrednost lastnosti širine lahko nastavite glede na ločljivost zaslona in dolžino besedila.
Na dani sliki lahko vidite, da je povezava uspešno centrirana:
To je to! Razložili smo metode za centriranje povezave.
Zaključek
' poravnava besedila « in » marža ' se uporablja za centriranje povezave s prispevkom ' zaslon « in » premer ” lastnina. Lastnost prikaza je potrebna skupaj z lastnostjo poravnave besedila, pri uporabi lastnosti roba pa sta lastnosti prikaza in širine obvezni za centriranje povezave. Ta vodnik obravnava različne metode za centriranje povezave v CSS.