6 CSS triks for å justere innholdet vertikalt
La oss snakke om vertikal justering i CSS, eller å være mer presis hvordan det ikke kan gjøres. CSS har ennå ikke gitt en offisiell måte å sentrere innholdet vertikalt i sin container. Det er et problem som sannsynligvis har frustrert webutviklere overalt. Men ikke for å frykte, i dette innlegget kommer vi til å lede noen triks som kan hjelpe deg etterligne effekten.
Disse triksene kan imidlertid ha begrensninger, og du må kanskje bruk mer enn ett triks for å fullføre illusjonen. Hvis du vet om noe annet triks, gi oss beskjed i kommentarene.
1. Bruk absolutt posisjonering
Det første trikset vi skal se her bruker Først settes beholderelementets posisjon til relativ, og vi stiller barnelementposisjonen til For å justere det vertikalt, flytt barnelementets posisjon fra toppen, halvparten av beholderens høyde, og trekk den opp med halvparten av barnets elementbredde. Her er utgangen: Dette trikset er perfekt når det bare er et enkelt barnelement, ellers CSS3 Transform har gjort det enkelt å legge inn innhold i sentrum. CSS3 Transform, i motsetning til Forutsatt at vi har samme HTML-struktur som den foregående metoden - en forelder, ett barnelement - Vær oppmerksom på at CSS3 Transforms ikke fungerer i Internet Explorer 8 og under. Du vil kanskje bruke noen av de andre metodene her som en tilbakebetaling. Vi kan også bruke Dette trikset passer for når du ikke setter beholderen i en fast bredde, bare sett bredden til Hvis du bare har en enkelt linje med tekstinnhold i en beholder, kan du justere teksten vertikalt ved hjelp av Husk at dette trikset bare fungerer med en enkelt tekstlinje. Hvis innholdet bryter inn i to eller flere linjer, vil plassen mellom hver linje være som vi angitt i Personlig, ved hjelp av CSS Table er mitt favoritttrick for å bruke vertikal justering. Den fungerer i gamle nettlesere som Internet Explorer 8. Denne metoden gjøres ved å sette beholderelementets display til Den siste metoden for vertikal sentrering er ved å bruke Flexbox. Flexbox er en ny modul i CSS3. Det gir en mer grei metode for å tilpasse innholdet. For å sentrere innholdet vertikalt i flex-boks, legg det ganske enkelt til Husk at Flexbox-nettlesere bare støtter delfunksjoner av Flexbox-modulen, for eksempel Internet Explorer 10, Safari, 6 og Chrome 27 og under. Derfor, likt tricket med CSS3 Transform, sørg for at effekten faller pent i denne nettleseren.stilling eiendom. Du har to absolutte. Dette tillater oss å plassere det fritt på beholderen. absolutte posisjon vil påvirke det andre elementet i samme beholder.2. Bruk CSS3 Transform
stilling eiendom, vil ikke påvirke plasseringen av andre elementer i samme beholder.50% fra toppen og ved hjelp av CSS transform gir en oversettelse av -50%. Og der har du det.3. Bruk polstring
padding å skape en illusjon av vertikal justering. For å gjøre det må du bare sette topp og nederste polstring på samme måte som følger:auto.4. Bruk linjehøyde
linjehøyde eiendom. Sett linjehøyde verdi for omtrent det samme som beholderhøyde, og du vil se følgende utgang.linjehøyde, gir oss for mye hvite rom.5. Bruk CSS-tabellen
bord, mens barnelementet skal vises som Tabellen-celle- bruk deretter vertical-align Egenskaper for å sentrere tekst vertikalt.6. Bruk Flexbox
justeringselementer: senter; som følger, og det er det.
