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

Le Saint-Graal du Centrage CSS

by
Read Time:2 minsLanguages:

French (Français) translation by Hamza Zahir (you can also view the original English article)

Chris Coyier a récemment publié un arbre de décisione sur son site, CSS Tricks, afin de démontrer plusieurs moyens pour centrer horizontalement ou verticalement les élements en utilisant le CSS. Comme solutions autonomes, elles ont toutes leurs réserves, mais combinées, elles sont un outil de centrage imparable qui fonctionne cross-browser sur IE8 et versions supérieurs.

Voici comment faire.

Blocs de départ

Si vous êtes entrain de préparer un site adaptatif (responsive), vous aurez plus de chance si vous utilisez un dimensionnement en pourcentage pour vos élements, nous allons donc faire un élément arbitraire .container :

Pour vous assurer que notre élément container s'étend de façon appropriée, Nous allons donc définir html, body { width: 100%; height: 100%; }.

Turning the Tables

Maintenant, à l'intérieur de notre .container, nous allons obtenir le centrage vertical avec le modèle de table commune. Cela rend les éléments blocs inbriqués à se comporter comme des cellules de tableau, nous donnant ainsi le centrage vertical:

Enfin, nous allons ajouter un élément centré horizontalement:

À l'intérieur de ce bloc précédent, vous pouvez placer tout ce que vous voulez, y compris des blocs de texte à hauteur dynamique ou des éléments en position absolue.

Altérations

Pour changer le centrage horizontal de l'élement, vous n'avez qu'à modifier propriété text-align de l'élement .inner. Pour changer le centrage vertical de l'élement, vous pouvez modifier la propriété vertical-align de l'élement .inner.

Finalement

Cet exemple peut sembler utiliser beaucoup de balisage, mais finalement ce ne sont que trois divs: .outer, .inner, and.centered. D'ailleurs, le style de ceux-ci est cohérent afin que vous pouvez l'utiliser dans votre CSS boilerplate entre les projets et pas à vous inquiéter à nouveau.

Et voilà une technique de plus pour centrer en utilisant CSS qui est complètement à l'épreuve des balles. Mon espoir est que cela devienne l'approche standard de centrage et nous puissions enfin cesser de s'inquiéter de centrage en CSS.

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.