vertical-align:
De vertical-align propertie is een CSS-propertie die gebruikt wordt om elementen te plaatsen binnen een lijn met andere elementen. Dit betekent dat als je een afbeelding plaatst binnen een lijn met tekst, je de afbeelding kunt positioneren zodat hij zich op dezelfde verticale lijn met de tekst bevindt;
Voorbeelden:
- vertical-align: baseline;
- vertical-align: sub;
- vertical-align: super;
- vertical-align: top;
- vertical-align: text-top;
- vertical-align: middle;
- vertical-align: bottom;
- vertical-align: text-bottom;
Toepassing:
<DIV style="vertical-align: text-bottom;">
Voorbeeldtekst
</DIV>
text-align:
De text-align property is gebruikt om de horizontale uitlijning van tekst binnen een element te definiëren. Tekst kan worden uitgelijnd naar links, rechts, het midden of naar beide kanten;
Voorbeelden:
- text-align: left;
- text-align: right;
- text-align: center;
- text-align: justify;
Toepassing:
<DIV style="text-align: justify;">
Voorbeeldtekst
</DIV>
text-align-last:
text-align-last bepaalt hoe de zin wordt uitgelijnd in de laatste lijn van een paragraaf. Het kan worden ingezet om de laatste lijn te laten beginnen op een bepaalde positie
Voorbeelden:
- text-align-last: start;
- text-align-last: end;
- text-align-last: left;
- text-align-last: right;
- text-align-last: center;
- text-align-last: justify;
Toepassing:
<DIV style="text-align-last: justify;">
Voorbeeldtekst
</DIV>
align-content:
align-content is een css property die wordt gebruikt om de manier waarop meerdere rijen flex items worden uitgelijnd binnen een flex container te regelen. Het bepaalt de manier waarop flex items worden verdeeld over de flex rijen en de ruimte tussen de flex rijen.
Voorbeelden:
- align-content: stretch;
- align-content: center;
- align-content: flex-start;
- align-content: flex-end;
- align-content: space-between;
- align-content: space-around;
Toepassing:
<DIV style="align-content: space-around;">
Voorbeeldtekst
</DIV>
align-items:
De CSS align-items eigenschap stelt de uitlijning van items langs de kruislings as in een flex container. Dit bepaalt hoe de elementen in een flex container worden uitgelijnd langs de kruislings as. Als een element in een flex container hoogte heeft, zal het middelpunt langs de kruislings as gebruikt worden als uitlijningpunt.
Voorbeelden:
- align-items: flex-start;
- align-items: flex-end;
- align-items: center;
- align-items: baseline;
- align-items: stretch;
Toepassing:
<DIV style="align-items: stretch;">
Voorbeeldtekst
</DIV>
align-self:
align-self is een CSS property die gebruikt kan worden om de uitlijning van een enkel element te veranderen. Het bepaalt hoe een element zich gedraagt binnen het flex-item waar het in staat, en kan worden gebruikt om een element uit te lijnen met andere elementen, ongeacht welke volgorde ze in de bron-code staan. align-self wordt vaak gebruikt in combinatie met display: flex; en de flex-direction, flex-wrap en justify-content eigenschappen.
Voorbeelden:
- align-self: auto;
- align-self: start;
- align-self: end;
- align-self: center;
- align-self: stretch;
- align-self: baseline;
Toepassing:
<DIV style="align-self: baseline;">
Voorbeeldtekst
</DIV>