Vertical Alignment Problemer med HTML

Vertikal justering kanskje ikke alltid fungerer som forventet. Vertikal justering kan administreres på en av to måter. Blokkelementer kan bruke CSS eiendom "vertical-align." Problemet med begge disse er at de ikke er designet for generell bruk i layouten - bare med blokkerte elementer. For noen HTML-elementer, er loddrett justering forvaltes i HTML ved hjelp av "valign" tag.

tabeller

Hvis du oppretter en layout som bruker tabeller, er sjansen stor for at en celle skal ha mer innhold enn den andre. Når en celle har mer vertikal plass enn innhold, justerer alt mot sentrum - ikke akkurat estetisk tiltalende web design. Tidligere denne ble lett løst ved å legge til "valign" attributt til cellen (<td>) tag. Valign verdier er topp, midten, bunn og grunnlinjen, for eksempel <td valign = "top" align = "center">. Imidlertid er valign foreldet; mens det fungerer, er det ut-datert. Du bør i stedet CSS for å justere dine celleelementer.

Vertical Alignment i CSS

CSS tilsvarende "valign" tag er "vertical-align." Den kan brukes på samme måte med større presisjon. Vertikal justere verk i cellene i stedet for "valign." Med innebygde elementer, for eksempel bilder eller div elementer innen flyten av teksten, er den vertikale justeringen endret basert på linjen det er i - ikke på selve siden. Som sådan, problemet du er mest sannsynlig å møte med vertikal-align er at det ikke gjør det samme i alle elementer. Hvis du bruker vertikal-align, kan du angi justeringen nøyaktig prosentvis eller piksler, samt sette de generiske justeringsalternativene av: topp, tekst-topp, midten, nederst, tekst-bunn, sub, super og baseline.

støttede Elements

CSS-attributtet "vertical-align" er kun ment å brukes på blokkelementer, ikke innholdet av de nevnte elementer. Bilder, div lag, tabellceller og span elementer er de eneste biter av HTML som vil oppføre seg på riktig måte. Ustrukturert tekst vil ikke fokusere på en side med vertikal-align alene; HTML-sider er flytende og har en tendens til bare å være så lenge de trenger det, noe som gjør vertikal justering for lang ustrukturert tekst upraktisk.

Implementering Vertikal Align

Du kan legge til "vertical-align" på noen tag der du ville ha brukt "valign", og det vil fungere. For blokkelementer, legge til "vertical-align" med verdien til CSS for å sette den til å justere vertikalt i forhold til teksten. For span koder må du også legge til CSS "display: inline block;" som behandler alt innenfor span som en blokk. For teori om hvordan å implementere vertikal justering for elementer som ikke er utformet for å bruke vertikale-align css, Gavin Kistner tilbyr forklaring og eksempler tutorials på phrogz.net/css/vertical-align/.