web-dev-qa-db-fra.com

Comment centrer les choses - affichage: bloc / bloc en ligne

En centrant les choses en html et css, je trouve deux approches - soit en appliquant sur l'élément:

display:block;
margin:0 auto;

ou en utilisant:

display:inline-block;
text-align:center; (on the parent element)

Je me demande toujours laquelle est la meilleure et pourquoi. Merci!!

htmlblockcentercss
21
user2335065

C'est une question classique et importante.

Les éléments peuvent être soit en ligne (ce qui signifie qu'ils sont tous assis les uns à côté des autres - comme une balise span) soit ils peuvent être bloqués (ce qui signifie que la pile est superposée - comme une balise div).

Marge: auto, bien qu'un peu étrange lorsque vous le voyez pour la première fois, est le meilleur et le seul moyen de centrer un élément de niveau bloc (position statique).

Pour tout ce qui est affiché: en ligne (comme une balise span) - la façon niquement de le centrer est si vous spécifiez text-align: center sur le parent. Cela centrera tout l'affichage: en ligne à l'intérieur de lui qui est position: statique;

Affichage: inline-block est un hybride des deux qui est relativement nouveau (mais pris en charge dès ie7 si vous utilisez le hack mentionné dans une autre réponse). Avec inline-block, vous bénéficiez des avantages de l'inline, en ce sens que vous pouvez coller un tas de choses côte à côte et les faire toutes centrer (pensez à une navigation où tous les éléments de navigation sont tous centrés), mais également l'élément profite de certaines des choses que vous obtenez avec display: block - le plus important étant HEIGHT.

Imaginez un scénario où chaque élément de navigation a une image d'arrière-plan de 80 pixels de haut - vous ne pouvez pas faire en sorte qu'un élément en ligne ait une hauteur de 80 - vous devez donc faire en sorte que chaque élément s'affiche: bloc - seulement alors vous pouvez lui donner un la taille. Donc, pour les faire apparaître les uns à côté des autres, vous devez les faire flotter. Le problème est que si vous les faites flotter, vous ne pouvez pas les avoir tous centrés sur la page à moins que vous ne donniez une largeur fixe à la navigation et à la marge: auto THAT. Cela signifie que la navigation a une largeur fixe - peut-être bien, mais il y a des moments où la navigation doit avoir des éléments dynamiques, des largeurs différentes pour différentes langues, etc.

Entrez display: inline-block.

15
gcoladarci

Les éléments de bloc doivent toujours être centrés en utilisant

.block {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}

comme indiqué par le w3c: http://www.w3.org/Style/Examples/007/center.fr.html#block

text-align: center;

est bien nommé: utilisez-le pour centrer les textes.

Mise à jour

Vous pouvez aussi utiliser display: flex maintenant:

.parent {
    display: flex;
    justify-content: center;
}
.block {
    width: 200px;
}
7
evuez

Il n'y a pas de meilleur moyen dans cette situation, les deux approches fonctionnent et les deux sont corrigées. Affichage d'une seule chose: le bloc en ligne ne fonctionne pas sur IE7 (si vous supportez ce navigateur), vous aurez besoin d'un hack pour le faire fonctionner

display: inline-block;
*display: inline;
zoom: 1;
4
Vinícius Moraes