Share
Chris Coyier publiserte nylig et beslutningstreet på sitt nettsted, CSS Tricks, for å demonstrere en mengde måter å horisontalt eller vertikalt sitte på ting ved hjelp av CSS. Som frittstående løsninger har de alle sine advarsler, men kombinert er de et ustoppelig sentreringsverktøy som fungerer i kryssbrowser i IE8 og opp konsekvent.
Slik gjør du.
Merk: for å dekke alle baser jeg har gitt forklaringen i video og skriftlig form.
Last ned video eller abonnere på Tuts + Web Design på Youtube
Hvis du lager en responsiv nettside, vil du mest sannsynlig tilpasse elementene dine med prosentandeler, så la oss gjøre en vilkårlig .container element:
...
.beholder bredde: 70%; høyde: 70%; margin: 40px auto; bakgrunn: rød;
For å sikre at vårt inneholdende element strekker seg riktig, la oss sette html, kropp bredde: 100%; høyde: 100%; .
Nå inne i det .container, Vi kommer til å få vertikal sentrering med det vanlige bordmønsteret. Dette tar normale blokknivåelementer og gjør at de oppfører seg som tabellceller, noe som gir oss vertikal sentrering:
...
.ytre display: bord; bredde: 100%; høyde: 100%; .inner display: tabell-celle; vertikaljustering: midt; tekst-align: center;
Til slutt skal vi legge til et horisontalt sentrert element:
...
.sentrert posisjon: relativ; display: inline-block; bredde: 50%; polstring: 1em; bakgrunn: oransje; farge: hvit;
Innsiden av det, kan du plassere alt ditt hjerte ønsker, inkludert dynamiske høyde tekstblokker, eller helt posisjonerte elementer.
Demo på GitHub
For å endre horisontal sentrering av elementet, bare endre .indre's tekst-Juster eiendom. For å endre den vertikale sentrering, endre .indre's vertical-align eiendom.
Dette eksempelet kan virke som mye oppslag, men arbeidsstykkene er bare tre divs: .ytre, .indre, og.sentrert. Og stylingen for disse er konsekvent, slik at du kan bruke dette i CEP-kjelen din på tvers av prosjekter og aldri bekymre deg for det igjen.
Det er ett element som er større enn de fleste sentreringsteknikker og helt tydelig. Mitt håp er at dette blir standard tilnærming, og vi kan endelig slutte å bekymre oss om sentrering i CSS.
Accentsconagua