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 å sitte på 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 med å etterligne effekten .
Disse triksene kan imidlertid ha begrensninger, og du må kanskje bruke 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 position
. Du har to
Først settes beholderelementets posisjon til relativ, og vi stiller barnelementets posisjon til absolute
. Dette tillater oss å plassere det fritt på beholderen.
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 vil den absolute
plasseringen påvirke det andre elementet i samme beholder.
2. Bruk CSS3 Transform
CSS3 Transform har gjort det enkelt å legge inn innhold i sentrum. CSS3 Transform, i motsetning til position
, vil ikke påvirke plasseringen av andre elementer i samme beholder.
Forutsatt at vi har samme HTML-struktur som den foregående metoden - en forelder, ett barnelement - 50%
fra toppen og ved hjelp av CSS-transformasjonen gir en oversettelse på -50%
. Og der har du det.
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.
3. Bruk polstring
Vi kan også bruke 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:
Dette trikset passer for når du ikke setter beholderen i en fast bredde, bare sett bredden til auto
.
4. Bruk linjehøyde
Hvis du bare har en enkelt linje med tekstinnhold i en beholder, kan du justere teksten vertikalt ved hjelp av egenskapen linjehøyde. Angi line-height
for omtrent det samme som beholderhøyde, og du vil se følgende utgang.
Husk at dette trikset bare fungerer med en enkelt tekstlinje. Hvis innholdet brytes inn i to eller flere linjer, vil plassen mellom hver linje være som angitt i line-height
, noe som gir oss for mye mellomrom.
5. Bruk CSS-tabellen
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 beholderelementvisningen til table
, mens barnelementet skal vises som table-cell
bruk deretter vertical-align
til å sentrere tekst vertikalt.
6. Bruk Flexbox
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-boksen, legg til bare align-items: center;
som følger, og det er det.
Husk at Flexbox-nettlesere bare støtter delvise funksjoner i Flexbox-modulen, for eksempel Internet Explorer 10, Safari, 6 og Chrome 27 og under. Derfor ligner på trikset med CSS3 Transform, sørg for at effekten faller pent i denne nettleseren.
CSS Post-prosessorer for nybegynnere: Tips og ressurser
CSS forbehandling er et konsept som de fleste webutviklere allerede har lært eller lest om. Vi har dekket CSS preprocessing i full detalj for å hjelpe utviklere til å få fart på denne utbredte teknologien. Men hva med postprosessorer ?Disse relativt nye verktøyene er like i den forstand at de påvirker webutviklings arbeidsflyten, men de opererer på den andre siden av CSS utvikling ("post" -utvikling).I dette
25 kreative bokhylle design du må se
Hvis du elsker bøker, vil ingen nettbrett, e-bøker eller e-leser få deg til å forlate din kjærlighet til papir og utskrift. På samme måte vil en bokmask alltid vedlikeholde et bibliotek med bøker . Men hvis du ikke finner plass til et personlig bibliotek, hjemme eller på jobb, kan disse kreative bokhyllene hjelpe deg med å organisere dine favorittlesningsmateriell bedre.Her er 20