Denne vejledning demonstrerer proceduren for horisontal og vertikal justering ved hjælp af CSS.
Hvordan justeres vandret og lodret ved hjælp af CSS?
Udviklerne bruger den 'horisontale' og 'lodrette' justering til at arrangere og placere elementer på en webside på en mere organiseret måde. De kan være nyttige til at justere elementer og indhold, positioneringsknapper eller ikoner osv. Følg nedenstående eksempler for en bedre forståelse:
Horisontal justering
I CSS bruges egenskaben text-align til at justere tekst vandret i dets overordnede element. Besøg nedenstående kodestykker for at få en bedre forståelse:
< legeme >
< div klasse = 'konto' >
< div klasse = 'venstrejustering' > Linuxhint er venstrejusteret < / div >
< div klasse = 'centerjuster' > Linuxhint er Center Align < / div >
< div klasse = 'højrejustering' > Linuxhint er Right Align < / div >
< / div >
< / legeme >
I ovenstående kodestykke:
- For det første forælderen ' div ' element bruges med en klasseattribut med værdien ' konto ”.
- Derefter er der oprettet tre underordnede elementer og klasseattributten er tildelt hver div.
- I sidste ende leveres værdierne 'leftAlign', 'centerAlign' og 'rightAlign' til klasserne.
Indsæt nu følgende CSS-egenskaber i '
.leftAlign {
Skærm : inline-blok ;
bredde : 30 % ;
polstring : 20 px ;
baggrundsfarve : skovgrøn ;
tekstjustering : venstre ;
}
.centerAlign {
Skærm : inline-blok ;
bredde : 30 % ;
baggrundsfarve : rød ;
polstring : 20 px ;
tekstjustering : centrum ;
}
.rightAlign {
Skærm : inline-blok ;
bredde : 30 % ;
baggrundsfarve : krikand ;
polstring : 20 px ;
tekstjustering : højre ;
}
>
I ovenstående kodeblok:
- Først vælges alle tre klasser separat, og derefter anvendes CSS-egenskaber ' Skærm ', ' bredde ', ' baggrundsfarve ' og ' polstring ' til dem. Disse egenskaber bruges til at forbedre visualiseringsformål.
- Dernæst værdierne for ' venstre ', ' centrum ' og ' højre ” gives til ” tekstjustering ' ejendom til ' venstrejuster ', ' centerJuster ', og ' højrejuster ” klasser, hhv.
Efter kompileringsprocessen ser HTML-elementerne således ud:
Ovenstående snapshot af browseren viser, at elementerne er horisontalt justeret i venstre, midterste og højre position.
Lodret justering
CSS ' lodret justere ' egenskab justerer det valgte element til ' y-aksen ” inden for deres overordnede element. De mulige værdier for egenskaben 'vertical-align' er ' baseline ', ' sub ', ' super ', ' top ', ' tekst-top ', ' midten ', ' bund ', og ' tekst-bund ”. Udviklerne bruger dog for det meste 'top', 'midt' og 'bund' værdier, mens de laver websidedesign. Besøg nedenstående kodestykke for at justere det valgte HTML-element øverst:
< div klasse = 'tælle' >< img src = 'hiunsplash.jpg' bredde = '200px' højde = '200px' >
< span klasse = 'captionTopAlign' > Denne tekst er justeret øverst lodret ved siden af billedet < / span >
< / div >
I ovenstående kodestykke:
- Først skal du oprette en forælder ' div ' element og tildel værdien ' tælle ' til ' klasse ' attribut.
- Inde i den overordnede container skal du bruge '
' tag og angiv stien til billedet som en værdi til ' src ' attribut.
- Angiv desuden værdien af ' 200 px ' til både ' bredde ' og ' højde ' attributter for '
” tag.
- Brug derefter ' ' tag og giv det en klasse af ' billedtekstTopAlign ”. Til sidst skal du give dummy-data til det.
Tilføj nu CSS-egenskaber for at style HTML-elementerne:
.tælle {bredde : fit-indhold ;
Skærm : blok ;
margin-venstre : 100 px ;
polstring : 10px ;
grænse : 2px solid rød ;
}
.captionTopAlign {
lodret
I ovenstående kodeblok:
- Først skal du vælge forælderen ' tælle ” klasse og angiv værdierne “fit-content”, “block”, “100px”, “10px” og “2px solid red” til CSS “ bredde ', ' Skærm ', ' margin-venstre ', ' polstring ' og ' grænse ' ejendomme. Disse egenskaber bruges til at style det overordnede element.
- Vælg derefter ' billedtekstTopAlign ' klasse og angive værdien af ' top ' til CSS ' lodret justere ” ejendom. Dette får HTML-elementet til at justere til toppositionen.
Efter udførelse af ovenstående kodelinjer ser websiden sådan ud:
Ovenstående snapshot viser, at det valgte HTML-element nu er topjusteret. På samme måde kan elementet justeres i midten, bunden osv.
Konklusion
Til vandret og lodret justering, ' tekstjustering ' og ' lodret justere ” CSS-egenskaber udnyttes hhv. Egenskaben 'tekst-align' tillader værdien af ' venstre ', ' højre ', ' centrum ' og ' retfærdiggøre ”. På den anden side er de mulige værdier for 'vertical-align' egenskaben ' baseline ', ' sub ', ' super ', ' top ', ' tekst-top ', ' midten ', ' bund ', og ' tekst-bund ”. Den vandrette og lodrette justering hjælper med at skabe rene og professionelle webdesigns.