Qu'est auto à faire dans le margin:0 auto?

Question

Qu'est - auto faire dans margin:0 auto;?

Je n'arrive pas à comprendre ce qu' auto n'. Je sais qu'il a parfois un effet de centrage des objets. Merci.

Answer 1

Lorsque vous avez spécifié un width sur l'objet que vous avez appliqué margin: 0 auto , l'objet va s'asseoir de manière centralisée au sein de son conteneur parent.

La spécification auto comme deuxième paramètre fondamentalement indique au navigateur de déterminer automatiquement les marges gauche et droite de lui-même, ce qu'il fait en définissant de manière égale. Il garantit que les marges gauche et droite seront exposées à la même taille. Le premier paramètre de 0 indique que les marges haut et bas permettra à la fois d'être mis à 0.

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

Donc, pour vous donner un exemple, si le parent est 100px et l'enfant est 50px, puis l' auto propriété permettra de déterminer qu'il y a 50px de l'espace à partager entre margin-left et margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Ce qui donnerait:

margin-left:25;
margin-right:25;

Jetez un oeil à cette jsFiddle. Vous n'avez pas à spécifier le parent largeur, seule la largeur de l'objet enfant.

Answer 2

auto: Le navigateur définit la marge. Le résultat de ceci est dépendant du navigateur

margin:0 auto spécifie

* top and bottom margins are 0
* right and left margins are auto

Answer 3

À partir de la spécification CSS sur le Calcul des largeurs et des marges au niveau des blocs, non-remplacement des éléments dans le flux normal:

Si les deux 'margin-left' et 'margin-right' sont 'auto', leurs valeurs sont égales. Ce centre horizontalement l'élément à l'égard des bords du bloc contenant.

Answer 4

margin:0 auto;

0 est de haut en bas et de l' auto pour la gauche-droite. Cela signifie que la gauche et la marge de droite prendra automatique de la marge en fonction de la largeur de l'élément et de la largeur du conteneur.

En général, si vous voulez mettre n'importe quel élément à la position du centre alors margin:auto fonctionne parfaitement. Mais il ne fonctionne que dans les éléments de bloc.