Vertical-align

Från Webbling
Hoppa till: navigering, sök

Anger hur ett element av typen inline eller table-cell ska placeras vertikalt i relation till dess föräldraelement.

Egenskaper

Parametrar <höjdvärde> | baseline | sub | super | text-top | text-bottom | middle | top | bottom
Defaultvärde baseline
Ärvs? Ja
Animerbart? Ja
Fungerar med... inline- eller table-cell-element.

I alla fall gäller att om föräldraelementet skulle sakna en baslinje, används nedre kanten på föräldraelementets bottenmarginal.

höjdvärde förflyttar elementet så långt ifrån föräldraelementets baslinje. Värdet kan anges med hjälp av alla CSS-måttenheter. Eventuell procent räknas ifrån föräldraelementets line-height.

baseline lägg elements baslinje i kant med föräldraelementets baslinje.

sub lägg elements baslinje i kant med den baslinje som gäller föräldraelementet nedsänkta text.

super lägg elements baslinje i kant med den baslinje som gäller föräldraelementet upphöjda text.

text-top lägg elements toppkant i kant med toppen på föräldraelementets teckensnitt.

text-bottom lägg elements bottenkant i kant med botten på föräldraelementets teckensnitt.

middle lägg elements baslinje i kant med föräldraelementets baslinje plus halva dess x-höjd.

top justerar så toppen av elementet läggs mot föräldraelementets topp.

bottom justerar så botten av elementet läggs mot föräldraelementets botten.

Exempel

See the Pen LpPyaY by Patrik Grip-Jansson (@PGJ) on CodePen.

Egenskapens definition

http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align