Deze handleiding demonstreert de procedure voor horizontale en verticale uitlijning met behulp van CSS.
Hoe horizontaal en verticaal uitlijnen met behulp van CSS?
De ontwikkelaars gebruiken de 'horizontale' en 'verticale' uitlijning om elementen op een webpagina op een meer georganiseerde manier te rangschikken en te positioneren. Ze kunnen handig zijn bij het uitlijnen van elementen en inhoud, het positioneren van knoppen of pictogrammen, enz. Volg de onderstaande voorbeelden voor een beter begrip:
Horizontale uitlijning
In CSS wordt de eigenschap text-align gebruikt om tekst binnen het bovenliggende element horizontaal uit te lijnen. Bezoek de onderstaande codefragmenten voor een beter begrip:
< lichaam >
< div klas = 'rekening' >
< div klas = 'linksUitlijnen' > Linuxhint is Links Uitlijnen < / div >
< div klas = 'centerAlign' > Linuxhint is Center Align < / div >
< div klas = 'rechtsUitlijnen' > Linuxhint is rechts uitgelijnd < / div >
< / div >
< / lichaam >
In het bovenstaande codefragment:
- Eerst de ouder “ div ” element wordt gebruikt met een class attribuut met een waarde van “ rekening ”.
- Vervolgens zijn er drie onderliggende elementen gemaakt en is het class-attribuut aan elke div toegewezen.
- Uiteindelijk worden de waarden van 'leftAlign', 'centerAlign' en 'rightAlign' aan de klassen verstrekt.
Voeg nu de volgende CSS-eigenschappen in de '
.linksUitlijnen {
weergave : inline-blok ;
breedte : 30% ;
opvulling : 20px ;
Achtergrond kleur : Bos Groen ;
tekst uitlijnen : links ;
}
.centerAlign {
weergave : inline-blok ;
breedte : 30% ;
Achtergrond kleur : rood ;
opvulling : 20px ;
tekst uitlijnen : centrum ;
}
.rightAlign {
weergave : inline-blok ;
breedte : 30% ;
Achtergrond kleur : wintertaling ;
opvulling : 20px ;
tekst uitlijnen : rechts ;
}
In het bovenstaande codeblok:
- Eerst worden alle drie de klassen afzonderlijk geselecteerd en passen vervolgens CSS-eigenschappen toe ' weergave ”, “ breedte ”, “ Achtergrond kleur ' En ' opvulling ' naar hen. Deze eigenschappen worden gebruikt om visualisatiedoeleinden te verbeteren.
- Vervolgens de waarden van ' links ”, “ centrum ' En ' rechts ” worden verstrekt aan de “ tekst uitlijnen ” eigendom aan de “ linksUitlijnen ”, “ centerUitlijnen ', En ' rechtsUitlijnen ” klassen, respectievelijk.
Na het compilatieproces zien de HTML-elementen er als volgt uit:
De bovenstaande snapshot van de browser laat zien dat de elementen horizontaal zijn uitgelijnd in de linker-, midden- en rechterposities.
Verticale uitlijning
De CSS “ verticaal uitlijnen ” eigenschap lijnt het geselecteerde element uit op de “ y-as ” binnen hun bovenliggende element. De mogelijke waarden voor de eigenschap 'verticaal uitlijnen' zijn ' basislijn ”, “ sub ”, “ super ”, “ bovenkant ”, “ tekst-top ”, “ midden ”, “ onderkant ', En ' tekst-bodem ”. De ontwikkelaars gebruiken echter meestal 'bovenste', 'middelste' en 'onderste' waarden bij het maken van webpagina-ontwerpen. Ga naar het onderstaande codefragment om het geselecteerde HTML-element op de bovenste positie uit te lijnen:
< div klas = 'graaf' >< img src = 'hiunsplash.jpg' breedte = '200 pixels' hoogte = '200 pixels' >
< span klas = 'onderschriftTopAlign' > Deze tekst is bovenaan verticaal naast de afbeelding uitgelijnd < / span >
< / div >
In het bovenstaande codefragment:
- Maak eerst een ouder aan ' div ” element en wijs een waarde toe van “ graaf ' naar de ' klas ” attribuut.
- Gebruik in de bovenliggende container de '
” tag en geef het pad van de afbeelding op als een waarde voor de “ src ” attribuut.
- Geef daarnaast de waarde op van ' 200px ” naar zowel de “ breedte ' En ' hoogte ” attributen van de “
' label.
- Gebruik vervolgens de ' ” tag en geef het een klasse van “ bijschriftTopAlign ”. Geef er uiteindelijk dummygegevens aan.
Voeg nu CSS-eigenschappen toe om de HTML-elementen te stylen:
.graaf {breedte : fit-inhoud ;
weergave : blok ;
marge-links : 100px ;
opvulling : 10px ;
grens : 2px stevig rood ;
}
.captionTopAlign {
verticaal
In het bovenstaande codeblok:
- Selecteer eerst de ouder ' graaf ' class en geef de waarden van 'fit-content', 'block', '100px', '10px' en '2px solid red' op aan de CSS ' breedte ”, “ weergave ”, “ marge-links ”, “ opvulling ' En ' grens ' eigenschappen. Deze eigenschappen worden gebruikt om het bovenliggende element op te maken.
- Selecteer vervolgens de ' bijschriftTopAlign ” klasse en geef de waarde op van “ bovenkant ” naar de CSS “ verticaal uitlijnen ' eigendom. Hierdoor wordt het HTML-element uitgelijnd met de bovenste positie.
Na het uitvoeren van de bovenstaande regels code, ziet de webpagina er als volgt uit:
De bovenstaande snapshot laat zien dat het geselecteerde HTML-element nu bovenaan is uitgelijnd. Op dezelfde manier kan het element worden uitgelijnd in de middelste, onderste richtingen, enz.
Conclusie
Voor horizontale en verticale uitlijning is de “ tekst uitlijnen ' En ' verticaal uitlijnen ” CSS-eigenschappen worden respectievelijk gebruikt. Met de eigenschap 'text-align' kan de waarde van ' links ”, “ rechts ”, “ centrum ' En ' verantwoorden ”. Aan de andere kant zijn de mogelijke waarden voor de eigenschap 'verticaal uitlijnen' ' basislijn ”, “ sub ”, “ super ”, “ bovenkant ”, “ tekst-top ”, “ midden ”, “ onderkant ', En ' tekst-bodem ”. De horizontale en verticale uitlijning helpt om strakke en professionele webdesigns te creëren.