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

Lorsque le centrage des choses en html et css, je trouve deux approches, soit l'application de l'élément :

display:block;
margin:0 auto;

ou à l'aide de:

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

Je me demande toujours ce qui est mieux et pourquoi. Merci!!

source d'informationauteur user2335065

  1. 13

    C'est un classique et importante question.

    É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) ou ils peuvent être de bloc (le sens de la pile sur le dessus les uns des autres - comme une balise div).

    Margin: auto, bien qu'un peu bizarre lors de votre première rencontre, est la meilleure et la seule façon de centre de niveau bloc (position statique), de l'élément.

    Pour tout ce qui est en display: inline (comme une balise span) - le seulement façon de centre, il n'est si vous spécifiez text-align: center sur le parent. Ce centre de tout display: inline à l'intérieur de ce qui est la position: static;

    Display: inline-block est un hybride des deux qui est relativement nouveau (mais pris en charge aussi loin que ie7 si vous utilisez le hack mentionné dans une autre réponse). Avec inline-block, vous obtiendrez les avantages en ligne, que vous pouvez vous coller un tas de choses à côté les uns des autres et de les avoir tous être centré (pensez à un nav où tous les nav éléments sont tous centrés), mais AUSSI que chaque élément de profiter de certaines des choses que vous obtenez avec display: block - la plus importante étant celle de la HAUTEUR.

    Imaginer un scénario où chaque élément nav a une image de fond qui est 80px hautes - vous ne pouvez pas en faire un élément inline, d'une hauteur de 80 - de sorte que vous auriez à faire de chaque élément en display: block - seulement alors pouvez-vous donner une hauteur. Donc, pour tous les faire apparaître à côté de l'autre, vous auriez du flotteur. Le problème est que si vous flottez, vous ne pouvez pas avoir tous être centré sur la page, sauf si vous donner une largeur fixe de la valeur liquidative et margin: auto QUE. Cela signifie que la valeur liquidative a une largeur fixe - peut-être bien, mais il ya des moments où la valeur liquidative est d'avoir des éléments dynamiques, des largeurs différentes pour les différentes langues, etc.

    Enter display: inline-block.

  2. 5

    Les éléments de bloc doit toujours être centrée à l'aide 

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

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

    text-align: center;

    est bien nommé: centre de textes.

    Mise à jour

    Vous pouvez également utiliser display: flex maintenant:

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

    Il n'y a pas de meilleure façon dans cette situation, les deux approches de travail et les deux sont corrigées. Juste une chose display:inline-block ne fonctionne pas sur IE7 (si vous soutenez ce navigateur), vous aurez besoin d'un hack pour le faire fonctionner

    display: inline-block;
*display: inline;
zoom: 1;