CSS - marginauto; - Πως δουλεύει

Χρησιμοποιώντας περιθώριο: αυτόματη για να κεντράρετε ένα στοιχείο μπλοκ οριζόντια είναι μια πολύ γνωστή τεχνική. Αλλά έχετε αναρωτηθεί ποτέ γιατί ή πώς λειτουργεί; Για να απαντήσουμε σε αυτό, πρέπει πρώτα να ρίξουμε μια ματιά στο πώς το περιθώριο: λειτουργεί αυτόματα. Επίσης, στο μίγμα υπάρχει κάτι αυτο μπορεί να κάνει σε περιθώρια, εάν λειτουργεί για κάθετο κεντράρισμα, και μερικά άλλα θέματα.

Αλλά πρώτα, τι κάνει αυτο στην πραγματικότητα?

Ο ορισμός του αυτο ποικίλλει με στοιχεία, τύπους στοιχείων και συμφραζόμενα. Στα περιθώρια, αυτο μπορεί να σημαίνει ένα από τα δύο πράγματα: να καταλάβει το διαθέσιμο χώρο ή 0 px. Αυτά τα δύο καθορίστε διαφορετικές διατάξεις για ένα στοιχείο.

"αυτόματη" Ανάληψη διαθέσιμου χώρου

Αυτή είναι η πιο συνηθισμένη χρήση περιθωρίου αυτο συναντάμε συχνά. Με την εκχώρηση αυτο στο αριστερό και το δεξί περιθώριο ενός στοιχείου, καταλαμβάνουν τον διαθέσιμο οριζόντιο χώρο στο δοχείο του στοιχείου εξίσου - και έτσι το στοιχείο γίνεται κεντραρισμένο.

Ωστόσο, αυτό θα λειτουργήσει μόνο για οριζόντια περιθώρια (περισσότερα για το Γιατί αργότερα), και επίσης δεν θα λειτουργήσει με floated και ενσωματωμένα στοιχεία και από μόνη της, επίσης δεν μπορεί να λειτουργήσει σε απόλυτος και σταθερά τοποθετημένα στοιχεία (θα δούμε όμως πώς να κάνουμε αυτές τις εργασίες).

Faux Float με την ανάληψη του διαθέσιμου χώρου

Από αυτο στα δεξιά και στα αριστερά περιθώρια καταλαμβάνουν το "διαθέσιμο" χώρο εξίσου, τι νομίζετε ότι θα συμβεί όταν η αξία αυτο δίνεται σε ένα μόνο από αυτά?

Ένα αριστερό ή δεξί περιθώριο με αυτο θα πάρει όλο τον "διαθέσιμο" χώρο κάνοντας το στοιχείο να μοιάζει σαν να έχει ξεπλυθεί δεξιά ή αριστερά.

“αυτο” Υπολογίστηκε σε 0px

Οπως αναφέρθηκε προηγουμένως, αυτο δεν θα λειτουργήσει σε επιπλέει, inline και απόλυτα στοιχεία. Όλα αυτά τα στοιχεία έχουν ήδη αποφάσισαν τις διατάξεις τους, έτσι δεν υπάρχει καμία χρήση στη χρήση αυτο για τα περιθώρια και αναμένοντας να επικεντρωθεί ακριβώς έτσι.

Αυτό θα νικήσει τον αρχικό σκοπό της χρήσης κάτι σαν αυτό φλοτέρ. Ως εκ τούτου αυτο θα έχει αξία 0px σε αυτά τα στοιχεία.

αυτο Επίσης, δεν θα λειτουργήσει σε ένα τυπικό στοιχείο μπλοκ αν δεν έχει πλάτος. Όλα τα παραδείγματα που σας έδειξα μέχρι στιγμής έχουν πλάτος.

Εύρος τιμής αυτο θα έχω 0px περιθώρια. Το πλάτος ενός στοιχείου μπλοκ τυπικά καλύπτει το δοχείο του όταν είναι αυτο ή 100% και ως εκ τούτου ένα περιθώριο αυτο θα υπολογιστεί σε 0px σε μια τέτοια περίπτωση.

Τι συμβαίνει με τα κατακόρυφα περιθώρια με την αξία αυτο?

αυτο τόσο στα επάνω όσο και στα κάτω περιθώρια υπολογίζεται πάντοτε σε 0px (εκτός από τα απόλυτα στοιχεία). Το W3C spec λέει όπως αυτό:

“Αν “περιθώριο-κορυφή” ή “περιθώριο-κάτω” είναι “αυτο”, η χρησιμοποιημένη τιμή τους είναι 0 "

Ο λόγος για τον οποίο, μέχρι τώρα, είναι ένα μυστήριο. Θα μπορούσε να οφείλεται στην τυπική ροή κάθετης σελίδας, όπου το μέγεθος της σελίδας αυξάνεται με το ύψος. Έτσι, το κεντράρισμα ενός στοιχείου κατακόρυφα στο δοχείο του δεν θα το κάνει να φαίνεται κεντραρισμένο, σε σχέση με την ίδια τη σελίδα, αντίθετα όταν γίνεται οριζόντια (στις περισσότερες περιπτώσεις).

Και ίσως εξαιτίας αυτού του ίδιου λόγου, αποφάσισαν να προσθέσουν μια εξαίρεση για απόλυτα στοιχεία που μπορούν να επικεντρωθούν κάθετα σε όλο το ύψος της σελίδας.

Θα μπορούσε επίσης να οφείλεται στο αποτέλεσμα της κατάρρευσης περιθωρίου (μια κατάρρευση των γειτονικών στοιχείων” περιθώρια) που αποτελεί άλλη εξαίρεση για τα κατακόρυφα περιθώρια.

Ωστόσο, το τελευταίο φαίνεται να είναι μια απίθανη περίπτωση - δεδομένου ότι στοιχεία που δεν καταρρέουν τα περιθώριά τους - όπως οι πλωτήρες, και στοιχεία με ξεχείλισμα άλλο από ορατός, εξακολουθείτε να αντιστοιχίζετε 0px κάθετα περιθώρια για αυτο.

Κεντράρισμα εντελώς τοποθετημένων στοιχείων

Δεδομένου ότι υπάρχει μια εξαίρεση για απολύτως τοποθετημένα στοιχεία, εμείς”θα χρησιμοποιήσω αυτο τιμή στο κέντρο ένα κάθετα και οριζόντια. Αλλά πριν από αυτό, πρέπει να μάθουμε πότε θα το κάνουμε περιθώριο: αυτόματη λειτουργεί πραγματικά όπως θέλουμε σε ένα απολύτως τοποθετημένο στοιχείο.

Εκεί βρίσκεται ένα άλλο spec του W3C:

"Αν και οι τρεις “αριστερά”, “πλάτος”, και “σωστά” είναι “αυτο”: Πρώτα ορίστε οποιοδήποτε “αυτο” τιμές για “περιθώριο-αριστερά” και “περιθώριο-δεξιά” σε 0 ... "

"Εάν δεν υπάρχει καμία από τις τρεις “αυτο”: Και τα δύο “περιθώριο-αριστερά” και “περιθώριο-δεξιά” είναι “αυτο”, λύσει την εξίσωση κάτω από τον επιπλέον περιορισμό ότι τα δύο περιθώρια αποκτούν ίσες τιμές "

Αυτό το λέει πολύ για αυτό οριζόντιος αυτο περιθώρια να καταλάβω ίσους χώρους, το τιμές για αριστερά, πλάτος και σωστά δεν πρέπει να είναι αυτο , την προεπιλεγμένη τιμή τους. Το μόνο που πρέπει να κάνουμε είναι να τους προσφέρουμε κάποια αξία σε ένα απολύτως τοποθετημένο στοιχείο. αριστερά και σωστά θα έπρεπε να ίσες τιμές για τέλεια κεντράρισμα.

Το spec αναφέρει επίσης κάτι παρόμοιο για κάθετα περιθώρια.

“Αν και οι τρεις “μπλουζα”, “ύψος”, και “κάτω μέρος” είναι αυτόματη, ρυθμισμένη “μπλουζα” στη στατική θέση ... ”

“Εάν δεν υπάρχει καμία από τις τρεις “αυτο”: Και τα δύο “περιθώριο-κορυφή” και “περιθώριο-κάτω” είναι “αυτο”, λύστε την εξίσωση κάτω από τον επιπλέον περιορισμό ότι τα δύο περιθώρια παίρνουν ίσες αξίες ... ”

Ως εκ τούτου, για ένα απόλυτο στοιχείο κεντραρισμένο κάθετα, του μπλουζα, ύψος, και κάτω μέρος τιμές δεν πρέπει να είναι αυτο.

Τώρα συνδυάζοντας όλα αυτά, αυτό είναι αυτό που κάνουμε”θα πάρετε:

συμπέρασμα

Αν θέλετε ποτέ να καθαρίσετε ένα στοιχείο στη σελίδα σας προς τα δεξιά ή προς τα αριστερά χωρίς τα ακόλουθα στοιχεία να το τυλίξουν (όπως συμβαίνει με το float), θυμηθείτε ότι υπάρχει η επιλογή χρήσης αυτο για περιθώρια.

Η μετατροπή ενός στοιχείου σε απόλυτο ακριβώς έτσι ώστε να μπορεί να επικεντρώνεται κάθετα μπορεί να μην είναι μια μεγάλη ιδέα. Υπάρχουν και άλλες επιλογές όπως το flexbox και το CSS transform που είναι πιο κατάλληλες για αυτούς.