Share
Chris Coyier publicerade nyligen ett beslutsträd på sin webbplats, CSS Tricks, för att visa en mängd olika sätt att horisontellt eller vertikalt centrera saker som använder CSS. Som fristående lösningar har de alla sina försiktighetsåtgärder, men i kombination är de ett ostoppbart centreringsverktyg som fungerar cross-browser i IE8 och upp konsekvent.
Så här gör du det.
Notera: för att täcka alla baser jag har förklarat i video och skriftlig form.
Ladda ner video eller prenumerera på Tuts + Web Design på Youtube
Om du skapar en mottaglig webbplats kommer du sannolikt att dimensionera dina element med procentandelar, så låt oss göra en godtycklig .behållare element:
...
.behållare bredd: 70%; höjd: 70%; marginal: 40px auto; bakgrund: röd;
För att se till att vårt innehåll som sträcker sig på lämpligt sätt, låt oss ställa in html, kropp bredd: 100%; höjd: 100%; .
Nu inuti det .behållare, vi kommer att få vertikal centrering med det vanliga bordsmönstret. Detta tar normala blocknivåelement och gör dem att fungera som bordsceller, vilket ger oss vertikala centrering:
...
.yttre display: bord; bredd: 100%; höjd: 100%; .inner display: tabell-cell; vertikaljustering: mitt; text-align: center;
Slutligen kommer vi att lägga till ett horisontellt centrerat element:
...
.centrerad position: relativ; display: inline-block; bredd: 50%; vaddering: 1em; bakgrund: orange; färg vit;
Inuti det kan du placera allt som ditt hjärta önskar, inklusive dynamiska höjdtextblock eller helt placerade element.
Demo på GitHub
Ändra bara den horisontella centreringen av elementet .inre's text-align fast egendom. Ändra den vertikala centreringen .inre's vertikal-align fast egendom.
Det här exemplet kan verka som mycket markup, men arbetsstyckena är bara tre divs: .yttre, .inre, och.centrerad. Och stilen för dessa är konsekvent så att du kan använda det här i din kedjeplattform CSS över projekt och aldrig oroa dig för det igen.
Det är ett element som är större än de flesta centreringsmetoderna och helt bulletproof. Mitt hopp är att detta blir standardmetoden och vi kan slutligen sluta oroa oss för att centrera i CSS.
Accentsconagua