Denne veiledningen demonstrerer prosedyren for horisontal og vertikal justering ved bruk av CSS.
Hvordan justere horisontalt og vertikalt ved hjelp av CSS?
Utviklerne bruker 'horisontal' og 'vertikal' justering for å arrangere og plassere elementer på en nettside på en mer organisert måte. De kan være nyttige for å justere elementer og innhold, posisjoneringsknapper eller ikoner osv. Følg eksemplene nedenfor for en bedre forståelse:
Horisontal justering
I CSS brukes egenskapen tekstjustering til å justere tekst horisontalt innenfor det overordnede elementet. Besøk kodebitene nedenfor for en bedre forståelse:
< kropp >
< div klasse = 'regnskap' >
< div klasse = 'venstrejustering' > Linuxhint er venstrejustert < / div >
< div klasse = 'senterjustering' > Linuxhint er Center Align < / div >
< div klasse = 'høyrejustering' > Linuxhint er Right Align < / div >
< / div >
< / kropp >
I kodebiten ovenfor:
- Først forelderen ' div '-elementet brukes med et klasseattributt som har verdien ' regnskap '.
- Deretter er tre underordnede elementer opprettet og klasseattributtet er tildelt hver div.
- Til slutt blir verdiene for 'leftAlign', 'centerAlign' og 'rightAlign' gitt til klassene.
Sett nå inn følgende CSS-egenskaper i '
.leftAlign {
vise : inline-blokk ;
bredde : 30 % ;
polstring : 20 piksler ;
bakgrunnsfarge : Skoggrønn ;
tekstjustering : venstre ;
}
.centerAlign {
vise : inline-blokk ;
bredde : 30 % ;
bakgrunnsfarge : rød ;
polstring : 20 piksler ;
tekstjustering : senter ;
}
.rightAlign {
vise : inline-blokk ;
bredde : 30 % ;
bakgrunnsfarge : blågrønn ;
polstring : 20 piksler ;
tekstjustering : Ikke sant ;
}
>
I kodeblokken ovenfor:
- Først velges alle tre klassene separat, og deretter brukes CSS-egenskaper ' vise ', ' bredde ', ' bakgrunnsfarge ' og ' polstring ' til dem. Disse egenskapene brukes til å forbedre visualiseringsformål.
- Deretter verdiene til ' venstre ', ' senter ' og ' Ikke sant ' gis til ' tekstjustering ' eiendom til ' venstrejustering ', ' midtjustering ', og ' høyrejuster ”-klasser, henholdsvis.
Etter kompileringsprosessen ser HTML-elementene slik ut:
Øyeblikksbildet ovenfor av nettleseren viser at elementene er horisontalt justert i venstre, midtre og høyre posisjon.
Vertikal justering
CSS ' vertikaljuster '-egenskapen justerer det valgte elementet til ' y-aksen ” innenfor deres overordnede element. De mulige verdiene for egenskapen 'vertical-align' er ' grunnlinje ', ' under ', ' super ', ' topp ', ' tekst-topp ', ' midten ', ' bunn ', og ' tekst-bunn '. Utviklerne bruker imidlertid for det meste 'topp', 'midt' og 'bunn' verdier mens de lager nettsidedesign. For å justere det valgte HTML-elementet i toppposisjonen, gå til kodebiten nedenfor:
< div klasse = 'telle' >< img src = 'hiunsplash.jpg' bredde = '200px' høyde = '200px' >
< span klasse = 'captionTopAlign' > Denne teksten er justert Topp vertikalt ved siden av bildet < / span >
< / div >
I kodebiten ovenfor:
- Først oppretter du en forelder ' div ' element og tilordne en verdi på ' telle ' til ' klasse ' Egenskap.
- Inne i den overordnede beholderen, bruk '
' tagge og angi banen til bildet som en verdi til ' src ' Egenskap.
- Oppgi i tillegg verdien av ' 200 piksler ' til både ' bredde ' og ' høyde ' attributter til '
' stikkord.
- Deretter bruker du ' ' tag og gi den en klasse på ' bildetekstToppjuster '. Til slutt, gi dummy-data til den.
Legg nå til CSS-egenskaper for å style HTML-elementene:
.telle {bredde : passe-innhold ;
vise : blokkere ;
marg-venstre : 100 piksler ;
polstring : 10 piksler ;
grense : 2px fast rød ;
}
.captionTopAlign {
vertikal
I kodeblokken ovenfor:
- Velg først forelderen ' telle '-klassen og oppgi verdiene 'fit-content', 'block', '100px', '10px' og '2px solid red' til CSS ' bredde ', ' vise ', ' marg-venstre ', ' polstring ' og ' grense ' egenskaper. Disse egenskapene brukes til å style det overordnede elementet.
- Deretter velger du ' bildetekstToppjuster ' klasse og oppgi verdien av ' topp ' til CSS ' vertikaljuster ' eiendom. Dette gjør at HTML-elementet justeres til toppposisjonen.
Etter utførelse av kodelinjene ovenfor, ser nettsiden slik ut:
Øyeblikksbildet ovenfor viser at det valgte HTML-elementet nå er toppjustert. På samme måte kan elementet justeres i midten, bunnen osv.
Konklusjon
For horisontal og vertikal justering, ' tekstjustering ' og ' vertikaljuster ” CSS-egenskaper benyttes hhv. 'text-align'-egenskapen tillater verdien av ' venstre ', ' Ikke sant ', ' senter ' og ' rettferdiggjøre '. På den annen side er de mulige verdiene for 'vertical-align'-egenskapen ' grunnlinje ', ' under ', ' super ', ' topp ', ' tekst-topp ', ' midten ', ' bunn ', og ' tekst-bunn '. Den horisontale og vertikale justeringen bidrar til å skape rene og profesjonelle webdesign.