Waarden
Voor elk van de volgende waarden passen we deze toe op een inline afbeelding in een regelvak van een lijstitem. Het lijnvak in elk van de afbeeldingen heeft een grijze stippellijn. De lijn die wordt gebruikt om de afbeeldingen voor elke waarde uit te lijnen, is rood.
baseline Dit is de standaardwaarde. Het lijnt de basislijn van het element uit met de basislijn van het lijnvak. Als het element geen basislijn heeft, wordt de rand van de ondermarge uitgelijnd met de basislijn van de regel.
midden Lijnt het verticale middelpunt van het element uit met de basislijn van de lijn plus de helft van de x-hoogte van de lijn (bepaald door de font).
Dit is een van de meest gebruikte waarden voor de vertical-align eigenschap, en wordt meestal gebruikt om pictogrammen en lijstmarkeringen uit te lijnen met de tekst in de regel.
sub Verlaagt de basislijn van het element naar de juiste positie voor subscripts op de regel. (Deze waarde heeft geen invloed op de lettergrootte van de tekst van het element.)
super Verhoogt de basislijn van het element naar de juiste positie voor superscript op de regel. (Deze waarde heeft geen invloed op de lettergrootte van de tekst van het element.)
text-top Lijnt de bovenkant van het element uit met de bovenkant van het inhoudsgebied van de regel. De hoogte van het inhoudsgebied is net hoog genoeg voor de maximale stijg- en dalingen van alle lettertypen in de lijn, en de uitlijningslijn is de bovenkant van die hoogte. Houd er rekening mee dat de hoogte groter kan zijn dan alle betrokken lettergroottes, afhankelijk van de basislijnuitlijning van de lettertypen.
text-bottom Lijnt de onderkant van het element uit met de onderkant van het inhoudsgebied van de regel. De hoogte van het inhoudsgebied is net hoog genoeg voor de maximale dalende en stijgende lijn van alle lettertypen in de lijn, en de uitlijningslijn is de onderkant van die hoogte. Houd er rekening mee dat de hoogte groter kan zijn dan de betrokken lettergroottes, afhankelijk van de basislijnuitlijning van de lettertypen.
top Lijnt de bovenkant van het element uit met de bovenkant van de hele lijn. Dit betekent dat als er andere elementen op de regel staan met elk een verschillende hoogte, zoals bijvoorbeeld meerdere afbeeldingen, de bovenkant van de regel even hoog zal zijn als de hoogste van de twee afbeeldingen.
Als de regel een expliciet ingestelde line-height dat hoger is dan de hoogste inhoud op de regel, wordt de bovenkant van het regelvak bepaald door die hoogte.
onder
line-height is opgegeven, wordt de onderkant van het regelvak bepaald door de laagste afstammelingen van het lettertype in dit voorbeeld, dus het resultaat lijkt op het resultaat dat we hebben gekregen van het gebruik van text-bottom. Lijnt het element uit op de onderkant van de hele regel.
Als de regel een expliciet ingestelde line-height die lager is dan de laagste inhoud op de regel, wordt de onderkant van het regelvak bepaald door die hoogte.
line-height die de onderkant van de regel naar beneden strekt en de afbeelding is uitgelijnd met die onderkant.
< percentage > Verhoog het element boven de basislijn (als de procentuele waarde positief is) of verlaag het element eronder de basislijn (als de procentuele waarde negatief is) met het opgegeven bedrag. Het opgegeven bedrag is een percentage van deline-height-waarde. De waarde0%betekent hetzelfde alsbaseline.
line-height is 100px, dus de afbeelding wordt 50px opgetild boven de basislijn. < length > Verhoog het element boven de basislijn (als de lengtewaarde positief is) of verlaag het element onder de basislijn (als de lengtewaarde negatief is) door het opgegeven bedrag. Een waarde ‘0’ betekent hetzelfde alsbaseline.
Opmerkingen
De waarden top, bottom en middle gedragen zich zoals verwacht wanneer ze worden toegepast op tabelcelelementen. Andere waarden kunnen echter in sommige browsers onverwacht gedrag vertonen. Chris Coyier zegt het het beste:
Wanneer u vertical-align gebruikt op tabelcellen, is vasthouden aan de bovenkant, onderkant en midden de beste keuze. Geen van de andere waarden is sowieso logisch en heeft onvoorspelbare cross-browserresultaten. Als u een cel bijvoorbeeld instelt op tekst-onder, wordt de tekst onderaan uitgelijnd in IE 6, en bovenaan in Safari 4. Als u deze instelt op sub, wordt de uitlijning in het midden in IE 6 en boven in Safari 4.
De standaard verticale uitlijning voor tabelcellen (<td>) is middle. De standaard verticale uitlijning voor een element op blokniveau met display: table-cell is echter nog steeds top, wat de standaarduitlijning is voor blokniveau containers in het algemeen. Zie de demo-sectie hieronder voor een live voorbeeld.
