Share
Chris Coyier publiceerde onlangs een beslissingsboom op zijn site, CSS Tricks, om een overvloed aan manieren aan te tonen om dingen horizontaal of verticaal te centreren met behulp van CSS. Als op zichzelf staande oplossingen hebben ze allemaal hun voorbehoud, maar gecombineerd zijn ze een niet te stoppen centreergereedschap dat cross-browser in IE8 en consistent werkt.
Dit is hoe je het doet.
Notitie: om alle bases te dekken heb ik de uitleg in video en geschreven vorm verstrekt.
Download video of abonneer je op Tuts + Web Design op YouTube
Als u een responsieve website maakt, zult u hoogstwaarschijnlijk uw elementen met percentages dimensioneren, dus laten we een willekeurige maken .houder element:
...
.container breedte: 70%; hoogte: 70%; marge: 40 px auto; achtergrond: rood;
Om te zorgen dat ons bevattende element zich naar behoren uitstrekt, laten we stellen html, body width: 100%; hoogte: 100%; .
Nu, daarbinnen .houder, we gaan verticaal gecentreerd worden met het gewone tafelpatroon. Dit neemt normale blokniveau-elementen op en zorgt ervoor dat ze zich gedragen als cellen in een tabel, waardoor we verticaal gecentreerd worden:
...
.buitenste display: table; breedte: 100%; hoogte: 100%; .inner weergave: tabelcel; vertical-align: middle; text-align: center;
Ten slotte gaan we een horizontaal gecentreerd element toevoegen:
...
.gecentreerd positie: relatief; weergave: inline-block; breedte: 50%; opvulling: 1em; achtergrond: oranje; kleur wit;
Binnenin kun je alles plaatsen wat je hartje begeert, inclusief tekstblokken met dynamische hoogte of absoluut geplaatste elementen.
Demo op GitHub
Als u de horizontale centrering van het element wilt wijzigen, hoeft u alleen maar te wijzigen .binnenste's text-align eigendom. Wijzig de verticale centrering .binnenste's vertical-align eigendom.
Dit voorbeeld lijkt veel opmaak, maar de werkstukken zijn slechts drie divs: .buitenste, .binnenste, en.gecentreerd. En de vormgeving hiervan is consistent, zodat u dit in uw standaard CSS in projecten kunt gebruiken en u er nooit opnieuw zorgen over hoeft te maken.
Het is nog een element groter dan de meeste centreringstechnieken en volledig kogelvrij. Ik hoop dat dit de standaardaanpak wordt en dat we eindelijk kunnen stoppen ons zorgen te maken over het centreren in CSS.
Accentsconagua