vertikalt justera

Värden

För vart och ett av följande värden kommer vi att tillämpa det på en inbyggd bild inuti en radruta i ett listobjekt. Linjerutan i var och en av bilderna har en prickad grå kant. Linjen som används för att justera bilderna för varje värde är röd.

baslinje Detta är standardvärdet. Den justerar elementets baslinje med linjens baslinje. Om elementet inte har en baslinje, justerar den nedre marginalen med linjens baslinje.

En bild i linje med linjens grundlinje som sitter bredvid texten i raden. Detta är den vertikala standardinställningen.

mitt Justerar elementets vertikala mittpunkt med linjens baslinje plus halva linjens x-höjd (bestämd av font).

Bildens vertikala mittpunkt är i linje med linjen som är halva x- linjens höjd ovanför baslinjen.

Detta är ett av de vanligaste värdena för vertical-align och används vanligtvis för att anpassa ikoner och listmarkörer med texten i raden.

sub Sänker elementets baslinje till rätt position för prenumerationer på raden. (Detta värde har ingen inverkan på teckenstorleken i elementets text.)

En bilds nedre kant sänks så att den är i linje med baslinjen för prenumerationen.

super Höjer elementets baslinje till rätt position för överskrift på raden. (Detta värde har ingen inverkan på teckenstorleken för elementets text.)

En bilds nedre kant lyfts så att den är i linje med baslinjen för superscript.

text-top Justerar toppen av elementet med toppen av radens innehållsområde. Innehållsområdets höjd är precis tillräckligt hög för maximalt stigande och nedåtgående för alla teckensnitt i raden, och justeringslinjen är toppen av den höjden. Observera att höjden kan vara större än alla inblandade teckensnittstorlekar, beroende på teckensnittens baslinjejustering.

Bilden är i linje med linjen precis ovanför teckensnittets uppsteg. Om mer än ett teckensnitt används kommer denna rad att vara precis ovanför den högsta uppstigningen av alla teckensnitt.

text-bottom Justerar botten på elementet med botten av radens innehållsområde. Innehållsområdets höjd är precis tillräckligt hög för maximalt antal nedstigningar och stigningar för alla teckensnitt i raden, och inriktningslinjen är botten av den höjden. Observera att höjden kan vara större än alla inblandade teckensnittsstorlekar, beroende på teckensnittens baslinjejustering.

Bilden är inriktad med raden precis under teckensnittets nedstigningar. Om mer än ett teckensnitt används kommer den här raden att ligga strax under den lägsta nedstigningen av alla teckensnitt.

topp Justerar toppen av elementet med toppen av hela raden. Det betyder att om det finns andra element på raden med olika höjder, som till exempel flera bilder, kommer den övre delen av raden att vara så hög som den högsta av de två bilderna.

En bild som är inriktad på toppen av radrutan. Toppen specificeras av det högsta elementet på raden som i detta fall är den andra bilden.

Om raden har en uttrycklig uppsättning line-height som är högre än det högsta innehållet på raden, kommer den övre delen av raden att bestämmas av den höjden.

En bild inriktad på toppen av radrutan som har en tydlig rad- angiven höjd som är större än hela innehållet.

botten

Bilden är inriktad mot botten av radrutan. Eftersom ingen line-height anges, bestäms längst ned på raden av de lägsta nedstigningarna av teckensnittet i detta exempel, så resultatet ser ut som det vi fick genom att använda text-bottom.

Justerar elementet längst ner på hela raden.

Om raden har en uttrycklig uppsättning line-height som är lägre än det lägsta innehållet på raden, kommer längst ned i raden att bestämmas av den höjden.

Bilden är inriktad mot botten av hela raden. Raden har en specificerad line-height som sträcker sig längst ned på linjen och bilden är i linje med den där botten.

< procent > Höj elementet över baslinjen (om procentvärdet är positivt), eller sänk elementet nedan baslinjen (om procentsatsen är negativ) med det angivna beloppet. Det angivna beloppet är en procentandel av värdetline-height. Värdet0%betyder samma sombaseline.

Bilden justeras med ett 50% -värde. Den angivna line-height är 100px, så bilden lyfts upp med 50px över baslinjen.

< längd > Höj elementet över baslinjen (om längdvärdet är positivt), eller sänk elementet under baslinjen (om längdvärdet är negativt) med det angivna beloppet. Ett värde ’0’ betyder samma sombaseline.

Bilden höjs från baslinjen med en viss mängd.

Anteckningar

Värdena top, bottom och middle beter sig som förväntat när de tillämpas på tabellcellelement. Andra värden kan dock ha oväntat beteende i vissa webbläsare. Chris Coyier säger att det är bäst:

När du använder vertikaljustering på bordsceller är det bästa att hålla fast med topp, botten och mitt. Ingen av de andra värdena är ändå mycket meningsfulla och har oförutsägbara korsläsarresultat. Om du till exempel ställer in en cell på textbotten justeras texten längst ner i IE 6 och längst upp i Safari 4. Om du ställer in den på sub orsakas mittjustering i IE 6 och topp i Safari 4.

Standard vertikal justering för tabellceller (<td>) är middle. Standard vertikal justering för ett blocknivåelement som har display: table-cell är dock fortfarande top, vilket är standardinriktningen för blocknivå behållare i allmänhet. Se demo-avsnittet nedan för ett liveexempel.

Write a Comment

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *