Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

De Heilige Graal van Centreren met CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Dutch (Nederlands) translation by Sibrand Hoekstra (you can also view the original English article)

Onlangs publiceerde Chris Coyier een beslisboom op zijn blog CSS Tricks waarin hij een aantal manieren demonstreert om dingen horizontaal en verticaal te centreren met CSS. De inidividuele oplossingen hebben allemaal zo hun valkuilen, maar gecombineerd zijn ze een geweldige centrering tool, die bovendien cross-browser (én vanaf IE8 en hoger) werkt.

Dit is hoe het werkt.

De bouwstenen

Als je een responsive site maakt, zul je waarschijnlijk je elementen layouten met percentages, dus laten we beginnen met een arbitrair .container element:

Om er zeker van te zijn dat onze container goed uitrekt, zetten we html, body { width: 100%; height: 100%; }.

De rollen omgedraaid (╯°□°)╯︵ ┻━┻)

Nu, in die .container, gaan we de boel verticaal centreren middels het gangbare table design patroon. Deze aanpak neemt een normaal block level element en zorgt ervoor dat het zich gedraagt als een tabelcel, waardoor we verticale centrering krijgen.

Nu voegen we een horizontaal gecentreerd element toe:

Daarbinnen kun je alles stoppen wat je maar wil, zelfs blokken tekst met een dynamische hoogte, of absoluut gepositioneerde elementen.

Variaties

Om de horizontale uitlijning van het element te veranderen, verander je .inner's text-align eigenschap. Om de verticale uitlijning te veranderen, verander je .inner's vertical-align eigenschap.

Conclusie

Het lijkt een boel markup in dit voorbeeld, maar het karwei gebeurt in slechts drie divs: .outer, .inner, and.centered.

De styling voor deze is consistent, dus je kan het in je boulerplate CSS opnemen voor verschillende projecten en er nooit weer over inzitten.

Het is maar één element meer dan we gewend zijn van de meeste CSS centreer-technieken, en volledig bulletproof. Ik hoop dat dit de standaard aanpak van centreren wordt en dat we eindelijk verlost zijn van de frustraties van het centreren in CSS.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.