web-dev-qa-db-fra.com

marge: auto; avec bloc en ligne

j'ai un "conteneur" div auquel j'ai donné margin:auto; qui a bien fonctionné tant que je lui ai donné un width spécifique, mais maintenant je l'ai changé en inline-block et margin:auto; ne fonctionne pas

css précédent

#container {
    border: 1px solid black;
    height: 500px;
    width: 650px;
}
.MtopBig {
    margin-top: 75px;
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

nouveau css

#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}
.MtopBig {
    margin: 75px auto;
    position: relative;
}
.center {
    text-align: center;
}

violon DEMO .

margincss
22
Math chiller

Il n'est plus centré car il circule désormais sur la page de la même manière que les éléments inline (de manière très similaire aux éléments img). Tu vas devoir text-align: center l'élément conteneur pour centrer le inline-blockdiv.

#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}
.MtopBig {
    margin: 75px auto;
    position: relative;
}
.center {
    text-align: center;
}
<div class="center">
    <div class="MtopBig" id="container"></div>
</div>
33
jsea

Que signifie "auto":

L'utilisation de auto pour la marge horizontale demandera à l'élément de remplir l'espace disponible (source: http: // www.hongkiat.com/blog/css-margin-auto/ ).

Pourquoi 'display: inline-block' ne se centre pas:

Il n'y a pas d'espace horizontal disponible dans un paramètre en ligne. Avant et après ce sont d'autres éléments en ligne (personnages) qui occupent leur propre espace. Par conséquent, l'élément agira comme si la marge horizontale était définie sur zéro.

Pourquoi les centres 'display: block':

Lorsqu'il est utilisé comme élément avec display: block défini sur lui, l'espace horizontal disponible sera la pleine largeur de l'élément parent moins la largeur de l'élément lui-même. Cela a du sens car display: block réserve cet espace horizontal (le rendant ainsi "disponible"). Notez que les éléments avec display: block ne peut pas être placé côte à côte. La seule exception se produit lorsque vous utilisez float, mais dans ce cas, vous obtenez également le comportement de marge nulle (attendu), car cela désactive la "disponibilité" horizontale.

Solution pour les éléments 'inline-block':

Éléments avec display: inline-block doit être approché comme des caractères. Le centrage des caractères/du texte peut être effectué en ajoutant text-align: center à leurs parents (mais vous le saviez probablement déjà ...).

15
JoostS

Pour les éléments avec propriété display: inline-block; ne valeur calculée de 'auto' pour 'margin-left' ou 'margin-right' devient une valeur utilisée de '0'.

6
daGo