Share
Chris Coyier a récemment publié un arbre de décision sur son site, CSS Tricks, afin de démontrer une multitude de façons de centrer horizontalement ou verticalement les choses à l'aide de CSS. En tant que solutions autonomes, ils ont tous des réserves, mais combinés, ils constituent un outil de centrage imparable qui fonctionne de manière cohérente sur plusieurs navigateurs dans IE8 et les versions supérieures.
Voici comment tu le fais.
Remarque: pour couvrir toutes les bases, j'ai fourni l'explication sous forme vidéo et écrite.
Téléchargez la vidéo ou abonnez-vous à Tuts + Web Design sur Youtube
Si vous créez un site Web réactif, vous allez probablement dimensionner vos éléments avec des pourcentages, alors faisons un choix arbitraire. .récipient élément:
…
.conteneur largeur: 70%; hauteur: 70%; marge: auto 40px; fond: rouge;
Pour nous assurer que notre élément conteneur s'étire de manière appropriée, définissons html, body width: 100%; hauteur: 100%; .
Maintenant, à l'intérieur de cela .récipient, nous allons obtenir un centrage vertical avec le modèle de table commun. Cela prend des éléments de niveau de bloc normaux et les fait se comporter comme des cellules de tableau, ce qui nous donne un centrage vertical:
…
.outer display: table; largeur: 100%; hauteur: 100%; .inner display: table-cellule; alignement vertical: milieu; text-align: center;
Enfin, nous allons ajouter un élément centré horizontalement:
…
.centré position: relative; affichage: inline-block; largeur: 50%; rembourrage: 1em; fond: orange; Couleur blanche;
À l'intérieur de cela, vous pouvez placer tout ce que votre coeur désire, y compris des blocs de texte à hauteur dynamique ou des éléments en position absolue.
Démo sur GitHub
Pour changer le centrage horizontal de l'élément, il suffit de modifier .internede aligner le texte propriété. Pour changer le centrage vertical, modifiez .internede alignement vertical propriété.
Cet exemple peut sembler beaucoup de balisage, mais les pièces de travail ne sont que trois divs: .extérieur, .interne, et.centré. Et le style de ceux-ci est cohérent, vous pouvez donc l'utiliser dans votre CSS standard dans tous vos projets sans plus vous en soucier..
C'est un élément de plus que la plupart des techniques de centrage et complètement à l'épreuve des balles. J'espère que cela deviendra l'approche standard et que nous pourrons enfin cesser de nous préoccuper du centrage en CSS.
Accentsconagua