Que fait auto dans margin: 0 auto?

126

Que fait auto-on margin:0 auto;?

Je n'arrive pas à comprendre ce que autoça fait. Je sais que cela a parfois pour effet de centrer les objets. Merci.

css

— Jitendra Vyas
source

189

Lorsque vous avez spécifié un widthsur l'objet auquel vous avez postulé margin: 0 auto, l'objet sera placé au centre de son conteneur parent.

Spécifier autocomme second paramètre indique essentiellement au navigateur de déterminer automatiquement les marges gauche et droite lui-même, ce qu'il fait en les définissant de manière égale. Cela garantit que les marges gauche et droite seront définies à la même taille. Le premier paramètre 0 indique que les marges supérieure et inférieure seront toutes deux définies sur 0.

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

Par conséquent, pour vous donner un exemple , si le parent est 100px et l'enfant 50px, alors la autopropriété déterminera qu'il y a 50px d'espace libre à partager entre margin-leftet margin-right:

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

Ce qui donnerait:

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

Jetez un œil à ce fichier jsFiddle . Vous n'avez pas à spécifier la largeur du parent, uniquement la largeur de l'objet enfant.

— djdd87
source

mais nous ne définissons jamais de largeur à bodyet nous donnons toujours widthet margin:0 autoà#wrapper

— Jitendra Vyas

ok alors la marge entre le corps et l'objet sera calculée automatiquement par le navigateur.

— Jitendra Vyas

Y a-t-il une valeur similaire %? Je veux dire, y a-t-il une autre propriété en css qui peut donner le même résultat que gauche et droiteauto

— Jitendra Vyas

@GenericTypeTea - et que se passe-t-il dans l' margin:auto 0état?

— Jitendra Vyas

Cependant, pourquoi lorsque j'utilise margin: 20 auto, cela semble-t-il affecter le positionnement gauche-droite? Il semblerait que tout ce que j'ai fait a été d'ajouter une marge supérieure / inférieure ...

— pitosalas

13

auto: le navigateur définit la marge. Le résultat dépend du navigateur

marge: 0 spécifie automatiquement

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

— tibia
source

9

À partir de la spécification CSS sur le calcul des largeurs et des marges pour les éléments non remplacés au niveau du bloc dans un flux normal :

Si «margin-left» et «margin-right» sont tous les deux «auto», leurs valeurs utilisées sont égales. Cela centre horizontalement l'élément par rapport aux bords du bloc conteneur.

— Gombo
source

"leurs valeurs utilisées sont égales" quel en est le moyen?

— Jitendra Vyas

3

@ metal-gear-solid - Si la largeur du parent (déterminée par le navigateur ou par la largeur spécifiée) est de 100px et la largeur de votre div enfant est de 50px. Ensuite, margin: 0 auto déterminera qu'il y a 50px d'espace disponible. Il divise ensuite cela par 2, ce qui donne 25. Les marges gauche et droite sont alors toutes les deux fixées à 25, c'est-à-dire que les valeurs sont définies de manière égale.

— djdd87

1

Les valeurs utilisées font référence aux valeurs réellement utilisées en fonction des propriétés visuelles réelles de l'élément qui utilise cette propriété et de son bloc conteneur. La section liée a une formule qui est utilisée pour calculer la différence horizontale entre un élément et son bloc conteneur. Cette différence est ensuite crachée de manière égale et utilisée comme valeurs de marge horizontale réelles.

— Gumbo

6

margin:0 auto;

0est pour haut-bas et autopour gauche-droite. Cela signifie que les marges gauche et droite prendront une marge automatique en fonction de la largeur de l'élément et de la largeur du conteneur.

Généralement, si vous souhaitez placer un élément en position centrale, cela margin:autofonctionne parfaitement. Mais cela ne fonctionne que dans les éléments de bloc.

— user3237573
source

1

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

0 est pour haut-bas et auto pour gauche-droite. Le navigateur définit la marge.

— jaffer sathick
source

1

Cela devient plus clair avec quelques explications sur le fonctionnement des deux valeurs.

La propriété margin est un raccourci pour:

margin-top
margin-right
margin-bottom
margin-left

Alors, comment se fait-il que deux valeurs?

Eh bien, vous pouvez exprimer la marge avec quatre valeurs comme celle-ci:

margin: 10px, 20px, 15px, 5px;

ce qui signifierait 10px en haut, 20px à droite, 15px en bas, 5px à gauche

De même, vous pouvez également exprimer avec deux valeurs comme celle-ci:

margin: 20px 10px;

Cela vous donnerait une marge de 20 px en haut et en bas et de 10 px à gauche et à droite.

Et si vous définissez:

margin: 20px auto;

Ensuite, cela signifie une marge supérieure et inférieure de 20 pixels et une marge gauche et droite d'auto. Et auto signifie que la marge gauche / droite est automatiquement définie en fonction du conteneur. Si votre élément est un élément de type bloc, c'est-à-dire qu'il s'agit d'une boîte et qu'il occupe toute la largeur de la vue, alors définit automatiquement les marges gauche et droite de la même manière et, par conséquent, l'élément est centré.

— Angus Comber
source

-3

Il s'agit d'un remplacement cassé / très difficile à utiliser pour la balise «centre». Il est pratique lorsque vous avez besoin de tableaux cassés et d'un centrage non fonctionnel pour les blocs et le texte.

— Danny
source