Cosa fa auto in margin: 0 auto?

126

Cosa fa auto fa dentro margin:0 auto;?

Non riesco a capire cosa autofa. So che a volte ha l'effetto di centrare gli oggetti. Grazie.

css

— Jitendra Vyas
fonte

189

Quando hai specificato un widthsull'oggetto a cui hai applicato margin: 0 auto, l'oggetto si troverà centralmente all'interno del suo contenitore principale.

Specificare autocome secondo parametro in pratica dice al browser di determinare automaticamente i margini sinistro e destro stesso, cosa che fa impostandoli allo stesso modo. Garantisce che i margini sinistro e destro saranno impostati sulla stessa dimensione. Il primo parametro 0 indica che i margini superiore e inferiore saranno entrambi impostati su 0.

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

Pertanto, per darti un esempio , se il genitore è 100px e il figlio è 50px, la autoproprietà determinerà che ci sono 50px di spazio libero da condividere tra margin-lefte margin-right:

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

Che darebbe:

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

Dai un'occhiata a questo jsFiddle . Non è necessario specificare la larghezza padre, solo la larghezza dell'oggetto figlio.

— djdd87
fonte

ma non definiamo mai alcuna larghezza a bodye diamo sempre widthe margin:0 autoa#wrapper

— Jitendra Vyas

ok allora il margine tra il corpo e l'oggetto verrà calcolato automaticamente dal browser.

— Jitendra Vyas

C'è un valore simile in %? Voglio dire, c'è qualche altra proprietà in CSS che può dare lo stesso risultato come sinistra e destraauto

— Jitendra Vyas

@GenericTypeTea - e cosa succede in margin:auto 0condizioni?

— Jitendra Vyas

Tuttavia, perché quando uso margin: 20 auto sembra che ciò influisca sul posizionamento sinistra-destra? Sembrerebbe che tutto quello che ho fatto è stato aggiungere il margine superiore / inferiore ...

— pitosalas

13

auto: il browser imposta il margine. Il risultato di ciò dipende dal browser

margin: 0 auto specifica

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

— stinco
fonte

9

Dalla specifica CSS su Calcolo di larghezze e margini per elementi a livello di blocco non sostituiti nel flusso normale :

Se sia "margin-left" che "margin-right" sono "auto", i valori utilizzati sono uguali. Questo centra orizzontalmente l'elemento rispetto ai bordi del blocco contenitore.

— Gumbo
fonte

"i loro valori usati sono uguali" qual è il significato di questo?

— Jitendra Vyas

3

@ metal-gear-solid - Se la larghezza del genitore (determinata dal browser o dalla larghezza specificata) è 100px e la larghezza del div figlio è 50px. Quindi margin: 0 auto determinerà che ci sono 50px di spazio disponibile. Quindi lo dividerà per 2, ottenendo 25. I margini sinistro e destro sono quindi entrambi impostati su 25, cioè i valori sono impostati allo stesso modo.

— djdd87

1

I valori utilizzati si riferiscono ai valori effettivamente utilizzati a seconda delle proprietà visive effettive dell'elemento che utilizza questa proprietà e il suo blocco contenitore. La sezione collegata ha una formula che viene utilizzata per calcolare la differenza orizzontale tra un elemento e il suo blocco contenitore. Tale differenza viene quindi distribuita allo stesso modo e utilizzata come valori effettivi del margine orizzontale.

— Gumbo

6

margin:0 auto;

0 è per alto-basso e auto per sinistra-destra. Significa che i margini sinistro e destro prenderanno il margine automatico in base alla larghezza dell'elemento e alla larghezza del contenitore.

Generalmente, se vuoi mettere qualsiasi elemento in posizione centrale, allora margin:autofunziona perfettamente. Ma funziona solo negli elementi di blocco.

— user3237573
fonte

1

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

0 è per alto-basso e auto per sinistra-destra. Il browser imposta il margine.

— jaffer sathick
fonte

1

Diventa più chiaro con qualche spiegazione di come funzionano i due valori.

La proprietà margin è una scorciatoia per:

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

Allora come mai solo due valori?

Bene, puoi esprimere il margine con quattro valori come questo:

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

che significherebbe 10px in alto, 20px a destra, 15px in basso, 5px a sinistra

Allo stesso modo puoi anche esprimere con due valori come questo:

margin: 20px 10px;

Questo ti darebbe un margine di 20px sopra e sotto e 10px a sinistra e destra.

E se imposti:

margin: 20px auto;

Quindi ciò significa margine superiore e inferiore di 20 px e margine sinistro e destro dell'auto. E auto significa che il margine sinistro / destro viene impostato automaticamente in base al contenitore. Se il tuo elemento è un elemento di tipo blocco, il che significa che è un riquadro e occupa l'intera larghezza della vista, quindi automaticamente imposta i margini sinistro e destro allo stesso modo e quindi l'elemento è centrato.

— Angus Comber
fonte

-3

È un sostituto rotto / molto difficile da usare per il tag "center". È utile quando hai bisogno di tabelle rotte e centratura non funzionante per blocchi e testo.

— Danny
fonte