vertikaljustering

Verdier

For hver av de følgende verdiene vil vi bruke den på et innebygd bilde i en linjeboks av et listeelement. Linjeboksen i hvert av bildene har en stiplet grå kant. Linjen som brukes til å justere bildene for hver verdi er rød.

baseline Dette er standardverdien. Den justerer grunnlinjen til elementet med grunnlinjen til linjeboksen. Hvis elementet ikke har en grunnlinje, justerer den nederste marginkant med linjens grunnlinje.

Et bilde justert til linjenes basislinje, som sitter ved siden av teksten i linjen. Dette er standard vertikal justering.

midt Justerer det vertikale midtpunktet til elementet med linjens grunnlinje pluss halv x-høyden på linjen (bestemt av font).

Det vertikale midtpunktet på bildet er justert med linjen som er halvparten av x- høyden på linjen over baselinjen.

Dette er en av de mest brukte verdiene for vertical-align egenskap, og brukes vanligvis til å justere ikoner og listemarkører med teksten i linjen.

sub Senker grunnlinjen til elementet til riktig posisjon for abonnement på linjen. (Denne verdien har ingen innvirkning på skriftstørrelsen til elementets tekst.)

Nederste kant på et bilde senkes slik at den er justert med grunnlinjen til abonnementet.

super Hever grunnlinjen til elementet til riktig posisjon for overskrift på linjen. (Denne verdien har ingen innvirkning på skriftstørrelsen til elementets tekst.)

Nederste kant på et bilde løftes slik at den er justert med grunnlinjen til overskriftet.

tekst-topp Justerer toppen av elementet med toppen av linjens innholdsområde. Høyden på innholdsområdet er akkurat høy nok til maksimalt stigning og nedstigning for alle skriftene i linjen, og justeringslinjen er toppen av den høyden. Vær oppmerksom på at høyden kan være større enn noen av de involverte skriftstørrelsene, avhengig av skriftlinjens basisjustering.

Bildet er justert med linjen rett over stigningene til fonten. Hvis mer enn én font brukes, vil denne linjen være like over den høyeste stigningen av alle skriftene.

text-bottom Justerer bunnen av elementet med bunnen av linjens innholdsområde. Høyden på innholdsområdet er akkurat høy nok til å maksimere nedstigninger og stigninger på alle skriftene i linjen, og justeringslinjen er bunnen av den høyden. Vær oppmerksom på at høyden kan være større enn noen av de involverte skriftstørrelsene, avhengig av skriftlinjens basisjustering.

Bildet er justert med linjen rett under nedstigningen av fonten. Hvis mer enn én skrift brukes, vil denne linjen være rett under den laveste nedstigningen av alle skriftene.

topp Justerer toppen av elementet med toppen av hele linjen. Dette betyr at hvis det er andre elementer på linjen med hver sin høyde, som for eksempel flere bilder, vil toppen av linjen være så høy som den høyeste av de to bildene.

Et bilde justert til toppen av linjeboksen. Toppen er spesifisert av det høyeste elementet på linjen som i dette tilfellet er det andre bildet.

Hvis linjen har et eksplisitt sett line-height som er høyere enn det høyeste innholdet på linjen, vil toppen av linjeboksen da bli bestemt av den høyden.

Et bilde justert til toppen av linjeboksen som har en eksplisitt linje- angitt høyde som er større enn høyden på alt innholdet.

bunn

Bildet er justert til bunnen av linjeboksen. Siden ingen line-height er spesifisert, blir bunnen av linjeboksen bestemt av de laveste nedstigningene av skrifttypen i dette eksemplet, så resultatet ser ut som det vi fikk ved å bruke text-bottom.

Justerer elementet til bunnen av hele linjen.

Hvis linjen har et eksplisitt sett line-height som er lavere enn det laveste innholdet på linjen, vil bunnen av linjeboksen da bli bestemt av den høyden.

Bildet er justert til bunnen av hele linjeboksen. Linjen har en spesifisert line-height som strekker bunnen av linjen nedover, og bildet er justert med den bunnen.

< prosent > Hev elementet over grunnlinjen (hvis prosentverdien er positiv), eller senk elementet under grunnlinjen (hvis prosentverdien er negativ) med det angitte beløpet. Beløpet som er angitt er en prosentandel avline-height-verdien. Verdien0%betyr det samme sombaseline.

Bildet er justert med en verdi på 50%. line-height som er spesifisert er 100 px, så bildet løftes opp med 50 px over grunnlinjen.

< lengde > Løft elementet over grunnlinjen (hvis lengdeverdien er positiv), eller senk elementet under grunnlinjen (hvis lengdeverdien er negativ) med spesifisert beløp. Verdien ‘0’ betyr det samme sombaseline.

Bildet heves fra grunnlinjen med et spesifisert beløp.

Notater

Verdiene top, bottom og middle oppfører seg som forventet når de brukes på tabellcelleelementer. Imidlertid kan andre verdier ha uventet oppførsel i noen nettlesere. Chris Coyier sier det best:

Når du bruker vertikaljustering på bordceller, er det best å holde fast med topp, bunn og midt. Ingen av de andre verdiene gir mye mening uansett, og har uforutsigbare resultater på tvers av nettlesere. Hvis du for eksempel setter en celle til tekstbunn, justeres teksten til bunnen i IE 6 og til toppen i Safari 4. Hvis du setter den til under, blir midtjustering i IE 6 og øverst i Safari 4.

Standard vertikal justering for tabellceller (<td>) er middle. Standard vertikal justering for et blokknivåelement som har display: table-cell er imidlertid fortsatt top, som er standardjusteringen for blokknivå containere generelt. Se demo-delen nedenfor for et live eksempel.

Write a Comment

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *