it.hideout-lastation.com
CSS - margine: auto - Come funziona
Usare il margin:auto per centrare un elemento del blocco in senso orizzontale è una tecnica ben nota. Ma ti sei mai chiesto perché o come funziona? Per rispondere a questo, dobbiamo prima dare un'occhiata a come margine: funziona automaticamente. Inoltre nel mix è ciò che auto può fare nei margini, se funziona per il centraggio verticale, e alcuni altri problemi.
Ma prima, cosa fa effettivamente l' auto ?
La definizione di auto varia con elementi, tipi di elementi e contesto . Ai margini, auto può significare una delle due cose: occupare lo spazio disponibile o 0 px. Questi due definiranno layout diversi per un elemento .
"auto" che occupa lo spazio disponibile
Questo è l'uso più comune del margine auto incontriamo spesso. Assegnando l' auto ai margini sinistro e destro di un elemento, occupano lo spazio orizzontale disponibile nel contenitore dell'elemento in modo uguale e quindi l'elemento viene centrato.
Tuttavia, questo funzionerà solo per i margini orizzontali (più sul perché dopo), e inoltre non funzionerà con elementi flottanti e inline e da solo, non può funzionare anche in elementi posizionati in modo assoluto e fisso (vedremo comunque come fare in modo che funzionino).
Faux Float prendendo spazio disponibile
Dal momento che l' auto in entrambi i margini destro e sinistro occupa lo spazio "disponibile" allo stesso modo, cosa pensi che accadrà quando il valore auto viene assegnato a uno solo di quelli?
Un margine sinistro o destro con auto occuperà tutto lo spazio "disponibile" facendo apparire l'elemento come se fosse stato svuotato a destra oa sinistra.
"Auto" calcolato su 0px
Come accennato prima, l' auto non funzionerà in elementi flottati, in linea e assoluti. Tutti questi elementi hanno già deciso i loro layout, quindi non serve usare l' auto per i margini e aspettarsi che venga centrato proprio così.
Ciò vanificherebbe lo scopo iniziale di usare qualcosa come float . Quindi l' auto avrà un valore di 0px in quegli elementi.
auto non funzionerà anche su un elemento di blocco tipico se non ha una larghezza. Tutti gli esempi che ti ho mostrato finora hanno larghezze.
Una larghezza di valore auto avrà margini di 0px . La larghezza di un elemento di blocco in genere copre il suo contenitore quando è auto o 100% e quindi un margine auto verrà calcolato su 0px in questo caso.
Cosa succede ai margini verticali con il valore auto ?
auto nei margini superiore e inferiore viene sempre calcolata su 0px (tranne che per gli elementi assoluti). Le specifiche W3C lo dicono così:
"Se" margin-top "o" margin-bottom "è" auto ", il loro valore utilizzato è 0"
Il perché, beh, è così lontano, un mistero. Potrebbe essere dovuto al tipico flusso di pagine verticali, in cui le dimensioni della pagina aumentano in base all'altezza . Quindi, centrare un elemento verticalmente nel suo contenitore non lo farà apparire centrato rispetto alla pagina stessa, a differenza di quando è fatto orizzontalmente (nella maggior parte dei casi).
E forse a causa di questa stessa ragione, hanno deciso di aggiungere un'eccezione per gli elementi assoluti che possono essere centrati verticalmente lungo l'intera altezza della pagina.
Potrebbe anche essere a causa dell'effetto collasso del margine (un crollo dei margini degli elementi adiacenti) che costituisce un'altra eccezione per i margini verticali.
Tuttavia, quest'ultimo sembra essere un caso improbabile - poiché gli elementi che non collassano i margini - come Floats e gli elementi con overflow diversi da quelli visible, assegnano ancora 0px margini verticali per l' auto .
Centraggio di elementi assolutamente posizionati
Poiché si verifica un'eccezione per gli elementi posizionati in modo assoluto, utilizzeremo il valore auto per centrare uno in verticale e in orizzontale. Ma prima di questo, abbiamo bisogno di scoprire quando sarà margin:auto realtà funziona come lo vogliamo in un elemento assolutamente posizionato.
Qui è dove arriva un'altra specifica W3C:
"Se tutti e tre i" left ", " width "e" right "sono" auto ": prima imposta tutti i valori" auto "per" margin-left "e" margin-right "su 0 ... "
"Se nessuno dei tre è" auto ": se" margin-left "e" margin-right "sono" auto ", risolvi l'equazione sotto il vincolo extra che i due margini ottengono valori uguali"
Questo dice che per auto margini auto orizzontali per ottenere spazi uguali, i valori per left, width e right non dovrebbero essere auto, il loro valore predefinito. Quindi tutto ciò che dobbiamo fare è dare loro un valore in un elemento assolutamente posizionato. left e right dovrebbero avere valori uguali per un centraggio perfetto .
La specifica menziona anche qualcosa di simile per i margini verticali.
"Se tutti e tre i" top ", " height "e" bottom "sono auto, imposta" top "sulla posizione statica ..."
"Se nessuno dei tre è" auto ": se" margin-top "e" margin-bottom "sono" auto ", risolvi l'equazione sotto il vincolo extra che i due margini ottengono valori uguali ..."
Quindi, affinché un elemento assoluto sia centrato verticalmente, i suoi valori top, height e bottom non dovrebbero essere auto .
Ora combinando tutti questi, questo è ciò che otterremo:
Conclusione
Se vuoi scaricare un elemento della tua pagina a destra oa sinistra senza i seguenti elementi che lo avvolgono (come quello che succede con float), ricorda che c'è l'opzione per usare auto per i margini.
Convertire un elemento in assoluto solo per poterlo centrare verticalmente potrebbe non essere una grande idea. Ci sono altre opzioni come flexbox e CSS transform che sono più adatte a quelle.
Freebie: 10 lettere di alta qualità in estate
Insieme a Freepik, stiamo rilasciando questa offerta gratuita di Hongkiat di 10 Summer Lettering, perfetta per un design che sia adatto per la spiaggia e perfetto per il paradiso. Le lettere sono disponibili in corsivo, maiuscolo e minuscolo e anche in numeri.Dai un'occhiata a questi omaggi e segui le istruzioni per avere la mano su questi file
Poligoni: il cucchiaio che il tuo amico panettiere adorerà
Quando si tratta di cottura, misurazioni accurate degli ingredienti sono fondamentali per il successo della ricetta. Ciò significherebbe una di queste due cose: potresti avere un sacco di misurini sul tavolo da forno, o dovrai fare molte misurazioni ripetitive. Se questo ti infastidisce, Poligoni è un must nella tua cucina.
