Οριζόντια και κάθετη στοίχιση στοιχείων. Κεντράροντας το div και άλλες λεπτές λεπτομέρειες τοποθέτησης

Πόσα αντίγραφα έχουν ήδη σπάσει σχετικά με την εργασία της ευθυγράμμισης στοιχείων σε μια σελίδα. Φέρνω στην προσοχή σας μια μετάφραση ενός εξαιρετικού άρθρου με λύση σε αυτό το πρόβλημα από τον Stephen Shaw για το Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.

Όλοι ξέραμε για περιθώριο: 0 αυτόματο;για οριζόντιο κεντράρισμα, αλλά περιθώριο: αυτόματο;δεν λειτούργησε για κάθετη. Αυτό μπορεί να διορθωθεί εύκολα ρυθμίζοντας απλώς το ύψος και εφαρμόζοντας τα ακόλουθα στυλ:

Απόλυτο-Κέντρο ( περιθώριο: αυτόματο; θέση: απόλυτη; πάνω: 0; αριστερά: 0; κάτω: 0; δεξιά: 0; )
Δεν είμαι ο πρώτος που προτείνει αυτή τη λύση, αλλά αυτή η προσέγγιση χρησιμοποιείται σπάνια για κάθετη ευθυγράμμιση. Στα σχόλια του άρθρου Πώς να κεντράρετε οτιδήποτε με CSS, ο Simon συνδέεται με ένα παράδειγμα jsFiddle που παρέχει μια εξαιρετική λύση για κάθετο κεντράρισμα. Εδώ είναι μερικά περισσότερα σχετικά με αυτό το θέμα.

Ας ρίξουμε μια πιο προσεκτική ματιά στη μέθοδο.

Πλεονεκτήματα

• Συμβατότητα μεταξύ προγραμμάτων περιήγησης (συμπεριλαμβανομένου του IE 8-10)
• Χωρίς πρόσθετη σήμανση, ελάχιστο στυλ
• Ικανότητα προσαρμογής
• Ανεξαρτησία από υλικό παραγεμίσματος(χωρίς μέγεθος κουτιού!)
• Λειτουργεί για εικόνες

Ελαττώματα

• Το ύψος πρέπει να καθοριστεί (δείτε Μεταβλητό ύψος)
• Συνιστάται να ρυθμίσετε υπερχείλιση: αυτώστε να μην διαδίδεται το περιεχόμενο
• Δεν λειτουργεί σε Windows Phone

Συμβατότητα προγράμματος περιήγησης

Η μέθοδος έχει δοκιμαστεί και λειτουργεί εξαιρετικά σε Chrome, Firefox, Safari, Mobile Safari ακόμη και IE 8-10. Ένας χρήστης ανέφερε ότι το περιεχόμενο δεν είναι κάθετα ευθυγραμμισμένο στο Windows Phone.

Μέσα στο δοχείο

Περιεχόμενο που τοποθετείται σε δοχείο με θέση: σχετικήθα ευθυγραμμιστεί τέλεια:

Απόλυτο-Κέντρο (πλάτος: 50%; ύψος: 50%, υπερχείλιση: αυτόματη; περιθώριο: αυτόματο; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0; δεξιά: 0; )

Χρήση θύρας προβολής

Ας ορίσουμε το περιεχόμενο στη θέση: fixed και ας ορίσουμε το z-index:

Absolute-Center.is-Fixed (πλάτος: 50%; ύψος: 50%; υπερχείλιση: αυτόματο; περιθώριο: αυτόματο; θέση: σταθερό; επάνω: 0; αριστερά: 0; κάτω: 0; δεξιά: 0; δείκτης z: 999;

Ικανότητα προσαρμογής

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

Absolute-Center.is-Responsive (πλάτος: 60%; ύψος: 60%, ελάχ. πλάτος: 400 εικονοστοιχεία; μέγ. πλάτος: 500 εικονοστοιχεία; γέμιση: 40 εικονοστοιχεία; υπερχείλιση: αυτόματη; περιθώριο: αυτόματη; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0;

Μετατοπίσεις

Εάν ο ιστότοπος έχει μια σταθερή κεφαλίδα ή πρέπει να κάνετε κάποια άλλη εσοχή, πρέπει απλώς να προσθέσετε κώδικα σαν αυτόν στα στυλ κορυφή: 70 px;Επί του παρόντος ρυθμισμένο περιθώριο: αυτόματο;το μπλοκ περιεχομένου θα είναι σωστά κεντραρισμένο σε ύψος.

Μπορείτε επίσης να ευθυγραμμίσετε το περιεχόμενο στην επιθυμητή πλευρά, αφήνοντας το κέντρο σε ύψος. Για να γίνει αυτό πρέπει να χρησιμοποιήσετε δεξιά: 0; αριστερά: auto;για σωστή ευθυγράμμιση ή αριστερά: 0; δεξιά: αυτόματο;για αριστερή ευθυγράμμιση.

Absolute-Center.is-Right ( πλάτος: 50%; ύψος: 50%, περιθώριο: αυτόματη; υπερχείλιση: αυτόματη; θέση: απόλυτη; επάνω: 0; αριστερά: αυτόματη; κάτω: 0; δεξιά: 20 εικονοστοιχεία; στοίχιση κειμένου: σωστά;

Πολύ περιεχόμενο

Για να διασφαλίσουμε ότι ένας μεγάλος όγκος περιεχομένου δεν επιτρέπει στη διάταξη να απομακρυνθεί, χρησιμοποιούμε υπερχείλιση: αυτ. Θα εμφανιστεί μια κάθετη γραμμή κύλισης. Μπορείτε επίσης να προσθέσετε μέγιστο ύψος: 100%;εάν το περιεχόμενο δεν έχει πρόσθετη επένδυση.
.Absolute-Center.is-Overflow ( πλάτος: 50%; ύψος: 300 εικονοστοιχεία; μέγ. ύψος: 100%; περιθώριο: αυτόματη; υπερχείλιση: αυτόματη; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0; δεξιά : 0;

εικόνες

Αυτή η μέθοδος λειτουργεί εξαιρετικά και για εικόνες! Ας προσθέσουμε στυλ ύψος: αυτόματο;τότε η εικόνα θα κλιμακωθεί μαζί με το κοντέινερ.

Absolute-Center.is-Image (πλάτος: 50%; ύψος: αυτόματο; περιθώριο: αυτόματο; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0; δεξιά: 0; )

Μεταβλητό ύψος

Η περιγραφόμενη μέθοδος απαιτεί ένα δεδομένο ύψος μπλοκ, το οποίο μπορεί να καθοριστεί ως ποσοστό και να ελεγχθεί χρησιμοποιώντας μέγιστο ύψος, γεγονός που καθιστά τη μέθοδο ιδανική για responsive ιστοσελίδες. Ένας τρόπος για να μην προσδιορίσετε ύψος είναι να χρησιμοποιήσετε οθόνη: πίνακας. Σε αυτήν την περίπτωση, το μπλοκ περιεχομένου είναι κεντραρισμένο ανεξάρτητα από το μέγεθος.

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

• Firefox/IE8:χρήση οθόνη: πίνακαςΕυθυγραμμίζει το μπλοκ κατακόρυφα στο επάνω περίγραμμα του εγγράφου.
• IE9/10:χρήση οθόνη: πίνακαςΕυθυγραμμίζει το μπλοκ στην επάνω αριστερή γωνία της σελίδας.
• Mobile Safari:εάν το πλάτος οριστεί σε ποσοστό, το οριζόντιο κεντράρισμα υποφέρει

.Absolute-Center.is-Variable ( οθόνη: πίνακας; πλάτος: 50%; υπερχείλιση: αυτόματο; περιθώριο: αυτόματο; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0; δεξιά: 0; )

άλλες μεθόδους

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

Αρνητικό περιθώριο

Ίσως ο πιο δημοφιλής τρόπος. Κατάλληλο εάν είναι γνωστές οι διαστάσεις του μπλοκ.

Είναι Αρνητικό ( πλάτος: 300 εικονοστοιχεία, ύψος: 200 εικονοστοιχεία, επένδυση: 20 εικονοστοιχεία, θέση: απόλυτη, επάνω: 50%, αριστερά: 50%, περιθώριο-αριστερά: -170 εικονοστοιχεία; /* (πλάτος + γέμιση)/2 */ περιθώριο- κορυφή: -120 px /* (ύψος + γέμιση)/2 */ )
Πλεονεκτήματα:

• Συμβατότητα μεταξύ προγραμμάτων περιήγησης
• Ελάχιστος κωδικός

Ελαττώματα:

• Μη προσαρμοστικό
• Η διάταξη σέρνεται αν υπάρχει πολύ περιεχόμενο στο δοχείο
• Πρέπει να αντισταθμίσετε την εσοχή ή τη χρήση box-sizing: border-box

Χρήση μετασχηματισμού

Ένας από τους απλούστερους τρόπους υποστηρίζει αλλαγές ύψους. Υπάρχει ένα λεπτομερές άρθρο σχετικά με αυτό το θέμα - "Κεντράρισμα στοιχείων πλάτους/ύψους ποσοστού" από το CSS-Tricks.

Is-Transformed (πλάτος: 50%; περιθώριο: αυτόματο; θέση: απόλυτη; επάνω: 50%; αριστερά: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%);
Πλεονεκτήματα:

• Μεταβλητό ύψος
• Ελάχιστος κωδικός

Ελαττώματα:

• Δεν λειτουργεί στον IE 8
• Χρήση προθεμάτων
• Μπορεί να επηρεάσει άλλες επιδράσεις με μεταμορφώνω
• Σε ορισμένες περιπτώσεις, οι άκρες του μπλοκ και το κείμενο είναι θολά κατά την απόδοση

Πίνακας-κελί

Ίσως ένας από τους καλύτερους και ευκολότερους τρόπους. Περιγράφεται αναλυτικά στο άρθρο "Εύκαμπτο ύψος κατακόρυφο κεντράρισμα με CSS, πέρα ​​από το IE7" του 456bereasttreet. Το κύριο μειονέκτημα είναι η πρόσθετη σήμανση: απαιτούνται τρία στοιχεία:

CSS:
.Pos-Container.is-Table ( εμφάνιση: πίνακας; ) .is-Table .Table-Cell ( εμφάνιση: πίνακας-κελί; κατακόρυφη στοίχιση: μέση; ) .is-Table .Center-Block ( πλάτος: 50%; περιθώριο: 0 αυτόματο;
Πλεονεκτήματα:

• Μεταβλητό ύψος
• Η διάταξη δεν λειτουργεί όταν υπάρχει μεγάλος όγκος κειμένου σε ένα μπλοκ
• Συμβατότητα μεταξύ προγραμμάτων περιήγησης

Ελαττώματα:

• Σύνθετη δομή

Flexbox

Το μέλλον του CSS, το flexbox θα λύσει πολλά από τα σημερινά προβλήματα διάταξης. Αυτό γράφεται λεπτομερώς σε ένα άρθρο του Smashing Magazine που ονομάζεται Centering Elements with Flexbox.

Pos-Container.is-Flexbox ( οθόνη: -webkit-box; εμφάνιση: -moz-box; εμφάνιση: -ms-flexbox; εμφάνιση: -webkit-flex; εμφάνιση: flex; -webkit-box-align: κέντρο; - moz-box-align: -ms-flex-align: -webkit-align-items: -webkit-box-pack: -ms-flex-content; : κέντρο;
Πλεονεκτήματα:

• Το περιεχόμενο μπορεί να έχει οποιοδήποτε ύψος ή πλάτος
• Μπορεί να χρησιμοποιηθεί σε πιο περίπλοκες περιπτώσεις

Ελαττώματα:

• Δεν υπάρχει υποστήριξη για τον IE 8-9
• Απαιτεί δοχείο ή στυλ στο σώμα
• Απαιτεί μεγάλη ποικιλία προθεμάτων για να λειτουργήσει σωστά στα σύγχρονα προγράμματα περιήγησης
• Πιθανά προβλήματα απόδοσης

Συμπέρασμα

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

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

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

Ας συγκρίνουμε τις ακόλουθες προσεγγίσεις. Ευθυγράμμιση χρησιμοποιώντας:

• τραπέζια,
• εσοχή,
• ύψος γραμμής
• τέντωμα,
• αρνητικό περιθώριο,
• μεταμορφώνω
• ψευδοστοιχείο
• flexbox.

Για να το καταλάβετε, εξετάστε το ακόλουθο παράδειγμα.

Υπάρχουν δύο στοιχεία div, με το ένα από αυτά να είναι φωλιασμένο μέσα στο άλλο. Ας τους δώσουμε τις αντίστοιχες τάξεις - εξωτερικές και εσωτερικές.

Η πρόκληση είναι να ευθυγραμμιστεί το εσωτερικό στοιχείο με το κέντρο του εξωτερικού στοιχείου.

Αρχικά, ας εξετάσουμε την περίπτωση όταν οι διαστάσεις των εξωτερικών και εσωτερικών μπλοκ γνωστός. Ας προσθέσουμε την εμφάνιση κανόνων: inline-block στο εσωτερικό στοιχείο, και text-align: κέντρο και κάθετη στοίχιση: από τη μέση στο εξωτερικό στοιχείο.

Να θυμάστε ότι η στοίχιση ισχύει μόνο για στοιχεία που έχουν λειτουργία εμφάνισης inline ή inline-block.

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

Εξωτερικό ( πλάτος: 200 εικονοστοιχεία; ύψος: 200 εικονοστοιχεία; στοίχιση κειμένου: κέντρο; κατακόρυφη στοίχιση: μέση; χρώμα φόντου: #ffc; ) .inner ( οθόνη: inline-block; πλάτος: 100 px; ύψος: 100 px; χρώμα φόντου : #fcc )
Αφού εφαρμόσουμε τα στυλ, θα δούμε ότι το εσωτερικό μπλοκ είναι ευθυγραμμισμένο οριζόντια, αλλά όχι κάθετα:
http://jsfiddle.net/c1bgfffq/

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

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

Ευθυγράμμιση με χρήση πίνακα

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

http://jsfiddle.net/c1bgfffq/1/

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

Το πρώτο μείον μπορεί να αφαιρεθεί εν μέρει αντικαθιστώντας τις ετικέτες πίνακα και td με div και ρυθμίζοντας τη λειτουργία εμφάνισης πίνακα σε CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Ωστόσο, το εξωτερικό μπλοκ θα παραμείνει τραπέζι με όλες τις επακόλουθες συνέπειες.

Στοίχιση με χρήση εσοχών

Εάν τα ύψη του εσωτερικού και του εξωτερικού μπλοκ είναι γνωστά, τότε η ευθυγράμμιση μπορεί να ρυθμιστεί χρησιμοποιώντας τις κάθετες εσοχές του εσωτερικού μπλοκ χρησιμοποιώντας τον τύπο: (H outer – H inner) / 2.

Εξωτερικό ( ύψος: 200 px; ) .inner (ύψος: 100 px; περιθώριο: 50 px 0; )
http://jsfiddle.net/c1bgfffq/6/

Το μειονέκτημα της λύσης είναι ότι εφαρμόζεται μόνο σε περιορισμένο αριθμό περιπτώσεων όταν τα ύψη και των δύο μπλοκ είναι γνωστά.

Ευθυγράμμιση χρησιμοποιώντας το ύψος γραμμής

Εάν γνωρίζετε ότι το εσωτερικό μπλοκ δεν πρέπει να καταλαμβάνει περισσότερες από μία γραμμές κειμένου, τότε μπορείτε να χρησιμοποιήσετε την ιδιότητα line-height και να την ορίσετε ίση με το ύψος του εξωτερικού μπλοκ. Δεδομένου ότι το περιεχόμενο του εσωτερικού μπλοκ δεν πρέπει να τυλίγεται στη δεύτερη γραμμή, συνιστάται να προσθέσετε επίσης το κενό διάστημα: nowrap και υπερχείλιση: κρυφοί κανόνες.

Εξωτερικό ( ύψος: 200 εικονοστοιχεία; ύψος γραμμής: 200 εικονοστοιχεία; ) .εσωτερικό ( λευκό διάστημα: nowrap; υπερχείλιση: κρυφό; )
http://jsfiddle.net/c1bgfffq/12/

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

Εξωτερικό ( ύψος: 200 εικονοστοιχεία, ύψος γραμμής: 200 εικονοστοιχεία; ) .εσωτερικό ( ύψος γραμμής: κανονικό, οθόνη: ενσωματωμένο μπλοκ, κατακόρυφη στοίχιση: μέση; )
http://jsfiddle.net/c1bgfffq/15/

Το μειονέκτημα αυτής της μεθόδου είναι ότι πρέπει να είναι γνωστό το ύψος του εξωτερικού μπλοκ.

Ευθυγράμμιση με χρήση "stretch"

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

Για να το κάνετε αυτό χρειάζεστε:

1. ορίστε τη σχετική τοποθέτηση στο εξωτερικό μπλοκ και την απόλυτη τοποθέτηση στο εσωτερικό μπλοκ.
2. προσθέστε τους κανόνες πάνω: 0 και κάτω: 0 στο εσωτερικό μπλοκ, με αποτέλεσμα να εκτείνεται σε όλο το ύψος του εξωτερικού μπλοκ.
3. ρυθμίστε την κατακόρυφη επένδυση του εσωτερικού μπλοκ σε αυτόματη.

.εξωτερικό (θέση: σχετική; ) .εσωτερικό (ύψος: 100 px; θέση: απόλυτη; επάνω: 0; κάτω: 0; περιθώριο: αυτόματο 0; )
http://jsfiddle.net/c1bgfffq/4/

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

Ευθυγράμμιση με αρνητικό περιθώριο-κορυφή

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

Πρέπει να ρυθμίσετε το εξωτερικό μπλοκ σε σχετική θέση και το εσωτερικό μπλοκ σε απόλυτη θέση. Στη συνέχεια, πρέπει να μετακινήσετε το εσωτερικό μπλοκ προς τα κάτω κατά το ήμισυ του ύψους της εξωτερικής κορυφής του μπλοκ: 50% και να το ανυψώσετε κατά το ήμισυ του δικού του ύψους περιθώριο-κορυφή: -H εσωτερικό / 2.

Εξωτερικό ( θέση: σχετική; ) .εσωτερικό (ύψος: 100 px; θέση: απόλυτη; επάνω: 50%; περιθώριο-πάνω: -50 px; )
http://jsfiddle.net/c1bgfffq/13/

Το μειονέκτημα αυτής της μεθόδου είναι ότι πρέπει να είναι γνωστό το ύψος της εσωτερικής μονάδας.

Ευθυγράμμιση με μετασχηματισμό

Αυτή η μέθοδος είναι παρόμοια με την προηγούμενη, αλλά μπορεί να χρησιμοποιηθεί όταν το ύψος της εσωτερικής μονάδας είναι άγνωστο. Σε αυτήν την περίπτωση, αντί να ορίσετε μια συμπλήρωση αρνητικού pixel, μπορείτε να χρησιμοποιήσετε την ιδιότητα μετασχηματισμού και να μετακινήσετε το εσωτερικό μπλοκ προς τα πάνω χρησιμοποιώντας τη συνάρτηση translateY και μια τιμή -50% .

Εξωτερική ( θέση: σχετική; ) .inner (θέση: απόλυτη; επάνω: 50%; μετασχηματισμός: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Γιατί ήταν αδύνατο να οριστεί η τιμή ως ποσοστό στην προηγούμενη μέθοδο; Εφόσον οι τιμές ποσοστιαίων περιθωρίων υπολογίζονται σε σχέση με το μητρικό στοιχείο, μια τιμή 50% θα ήταν το μισό του ύψους του εξωτερικού κουτιού και θα χρειαστεί να αυξήσουμε το εσωτερικό κουτί στο μισό του ύψους του. Η ιδιότητα μετασχηματισμού είναι ιδανική για αυτό.

Το μειονέκτημα αυτής της μεθόδου είναι ότι δεν μπορεί να χρησιμοποιηθεί εάν η εσωτερική μονάδα έχει απόλυτη τοποθέτηση.

Ευθυγράμμιση με το Flexbox

Ο πιο σύγχρονος τρόπος κάθετης ευθυγράμμισης είναι η χρήση του Flexible Box Layout (γνωστό ως Flexbox). Αυτή η ενότητα σάς επιτρέπει να ελέγχετε με ευελιξία τη θέση των στοιχείων στη σελίδα, τακτοποιώντας τα σχεδόν οπουδήποτε. Η στοίχιση στο κέντρο για το Flexbox είναι μια πολύ απλή εργασία.

Το εξωτερικό μπλοκ πρέπει να ρυθμιστεί ώστε να εμφανίζει: flex και το εσωτερικό μπλοκ στο περιθώριο: auto . Και είναι όλο! Όμορφο, έτσι δεν είναι;

Εξωτερική ( οθόνη: flex; πλάτος: 200px; ύψος: 200px; ) .inner (πλάτος: 100px; περιθώριο: auto; )
http://jsfiddle.net/c1bgfffq/14/

Το μειονέκτημα αυτής της μεθόδου είναι ότι το Flexbox υποστηρίζεται μόνο από σύγχρονα προγράμματα περιήγησης.

Ποια μέθοδο να επιλέξω;

Πρέπει να ξεκινήσετε από τη δήλωση προβλήματος:

• Για κάθετη στοίχιση κειμένου, είναι προτιμότερο να χρησιμοποιείτε κάθετες εσοχές ή την ιδιότητα line-height.
• Για απολύτως τοποθετημένα στοιχεία με γνωστό ύψος (για παράδειγμα, εικονίδια), η μέθοδος με την ιδιότητα αρνητικού περιθωρίου κορυφής είναι ιδανική.
• Για πιο σύνθετες περιπτώσεις, όταν το ύψος του μπλοκ είναι άγνωστο, πρέπει να χρησιμοποιήσετε ένα ψευδοστοιχείο ή την ιδιότητα μετασχηματισμού.
• Λοιπόν, εάν είστε τόσο τυχεροί που δεν χρειάζεται να υποστηρίζετε παλαιότερες εκδόσεις του προγράμματος περιήγησης IE, τότε, φυσικά, είναι καλύτερο να χρησιμοποιήσετε το Flexbox.

Ετικέτες: Προσθήκη ετικετών

Σήμερα, αγαπητέ αναγνώστη, θα ασχοληθούμε με το πρόβλημα της κάθετης ευθυγράμμισης σε ένα μπλοκ div.

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

Διατύπωση του προβλήματος:Πρέπει να κεντράρετε τα περιεχόμενα ενός μπλοκ μεταβλητού ύψους σε σχέση με την κατακόρυφο.

Τώρα ας αρχίσουμε να λύνουμε το πρόβλημα.

Και έτσι, έχουμε ένα μπλοκ, το ύψος του μπορεί να αλλάξει:

Το πρώτο πράγμα που σας έρχεται στο μυαλό είναι να κάνετε την ακόλουθη προσποίηση:

Υπάρχει κάθε λόγος να πιστεύουμε ότι η φράση Αποκλεισμός περιεχομένουθα ευθυγραμμιστεί στο κεντρικό ύψος του κοντέινερ div.

Αλλά δεν ήταν εκεί! Δεν θα επιτύχουμε καμία αναμενόμενη ευθυγράμμιση στο κέντρο με αυτόν τον τρόπο. Και γιατί; Φαίνεται ότι όλα υποδεικνύονται σωστά. Αποδεικνύεται ότι αυτό είναι το τρίψιμο: η ιδιοκτησία κατακόρυφη ευθυγράμμισημπορεί να χρησιμοποιηθεί μόνο για την ευθυγράμμιση των περιεχομένων των κελιών του πίνακα ή για την ευθυγράμμιση στοιχείων σε σχέση μεταξύ τους.

Όσον αφορά τη στοίχιση μέσα σε ένα κελί πίνακα, νομίζω ότι όλα είναι ξεκάθαρα. Αλλά θα εξηγήσω μια άλλη περίπτωση με ενσωματωμένα στοιχεία.

Κάθετη ευθυγράμμιση των ενσωματωμένων στοιχείων

Ας υποθέσουμε ότι έχετε μια γραμμή κειμένου που χωρίζεται με ετικέτες γραμμής σε μέρη:

Εσείς καλωσορίζει κομμάτικείμενο!

Μια ενσωματωμένη ετικέτα είναι ένα κοντέινερ του οποίου η εμφάνιση δεν προκαλεί την αναδίπλωση του περιεχομένου σε μια νέα γραμμή.

Η δράση της ετικέτας μπλοκ αναγκάζει τα περιεχόμενα του κοντέινερ να αναδιπλωθούν σε μια νέα γραμμή.

είναι μια ετικέτα μπλοκ. Αν περικλείσουμε κομμάτια κειμένου σε μπλοκ

, τότε καθένα από αυτά θα είναι σε μια νέα γραμμή. Χρήση ετικέτας , που, σε αντίθεση με

, είναι πεζά, τα κοντέινερ δεν θα μετακινηθούν σε νέα γραμμή, όλα τα κοντέινερ θα παραμείνει σε μία γραμμή.

Δοχείο βολικό στη χρήση όταν προσδιορίζετε ένα μέρος του κειμένου με ειδική μορφοποίηση (επισήμανση με χρώμα, διαφορετική γραμματοσειρά κ.λπ.)

Για δοχεία Εφαρμόστε τις ακόλουθες ιδιότητες CSS:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

Η γραμμή κειμένου που προκύπτει θα μοιάζει με αυτό:

Αυτό δεν είναι τίποτα άλλο από κάθετη στοίχιση των ενσωματωμένων στοιχείων και την ιδιότητα CSS κατακόρυφη ευθυγράμμισηαντιμετωπίζει τέλεια αυτό το έργο.

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

Κατακόρυφη ευθυγράμμιση σε δοχείο div

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

Πώς μπορούμε να το χρησιμοποιήσουμε αυτό; Δεν έχουμε τραπέζι, δουλεύουμε με δοχείο div.

Χα, αποδεικνύεται πολύ απλό.

Ιδιότητα CSS απεικόνισησας επιτρέπει να μετατρέψετε το μπλοκ div μας σε κελί πίνακα, αυτό μπορεί να γίνει εύκολα και φυσικά:

Ας πούμε ότι έχουμε ένα class div στοίχιση κειμένου:

Για αυτό το μπλοκ καθορίζουμε την ακόλουθη ιδιότητα CSS:

Textalign (εμφάνιση: κελί πίνακα; )

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

Ωστόσο, όλα δεν μπορούν να τελειώσουν τόσο απλά. Έχουμε ένα υπέροχο πρόγραμμα περιήγησης IE. Δεν ξέρει πώς να συνεργαστεί με το ακίνητο οθόνη: πίνακας-κελί(Σας προτείνω να διαβάσετε τον πίνακα που δείχνει τη λειτουργικότητα αυτής της ιδιότητας CSS σε διαφορετικά προγράμματα περιήγησης στον ιστότοπο htmlbook.ru). Επομένως, θα πρέπει να καταφύγουμε σε διάφορα κόλπα.

Υπάρχουν πολλοί τρόποι για να επιτευχθεί ευθυγράμμιση σε ένα κοντέινερ div για όλα τα προγράμματα περιήγησης:

• Μέθοδος με χρήση πρόσθετου βοηθητικού δοχείου div
• Μέθοδος που χρησιμοποιεί έκφραση. Συνδέεται με έναν δύσκολο υπολογισμό των υψών του μπλοκ. Δεν μπορείτε να το κάνετε αυτό χωρίς γνώση JavaScript.
• Χρήση της ιδιότητας line-height. Αυτή η μέθοδος είναι κατάλληλη μόνο για κατακόρυφη ευθυγράμμιση σε μπλοκ γνωστού ύψους και επομένως δεν εφαρμόζεται στη γενική περίπτωση.
• Χρήση απόλυτης και σχετικής μετατόπισης περιεχομένου σε περίπτωση προγράμματος περιήγησης IE. Αυτή η μέθοδος μου φαίνεται η πιο κατανοητή και απλή. Επιπλέον, μπορεί να εφαρμοστεί για δοχεία div μεταβλητού ύψους. Θα σταθούμε σε αυτό με περισσότερες λεπτομέρειες.

Όπως καταλαβαίνετε, πρέπει απλώς να λύσουμε το πρόβλημα της κάθετης ευθυγράμμισης στο IE που σχετίζεται με την παρεξήγηση της ιδιοκτησίας οθόνη: πίνακας-κελί(ούτε IE6, ούτε IE7, ούτε IE8δεν είναι εξοικειωμένοι με αυτό το ακίνητο). Επομένως, χρησιμοποιώντας υπό όρους σχόλιοΘα καθορίσουμε διαφορετικές ιδιότητες CSS ειδικά για την οικογένεια προγραμμάτων περιήγησης IE.

Σχόλιο υπό όρους

Τύπος κατασκευής:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

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

Οι οδηγίες που περιέχονται σε ένα τέτοιο σχόλιο υπό όρους θα εκτελεστούν μόνο εάν το πρόγραμμα περιήγησης που ερμηνεύει αυτόν τον κώδικα ανήκει στην οικογένεια IE.

Έτσι, χρησιμοποιώντας ένα υπό όρους σχόλιο, μπορούμε να αποκρύψουμε ένα κομμάτι κώδικα από όλα τα προγράμματα περιήγησης εκτός από το IE.

Η λύση του προβλήματος

Εξαιτίας αυτού του μαϊντανού, θα χρειαστεί να παρέχουμε τον κώδικα HTML μας με δύο επιπλέον δοχεία. Έτσι θα μοιάζει το μπλοκ κειμένου μας:

Για κατηγορία κοντέινερ div στοίχιση κειμένουΟρίζονται ιδιότητες CSS που ευθυγραμμίζουν το περιεχόμενό του κατακόρυφα για όλα τα κανονικά προγράμματα περιήγησης (εκτός από το IE, φυσικά):

Εμφάνιση: πίνακας-κελί; κατακόρυφη ευθυγράμμιση: μέση;

Και δύο ακόμη ιδιότητες που ορίζουν το πλάτος και το ύψος για το μπλοκ:

Πλάτος: 500 px; ύψος: 500 px;

Αυτό είναι αρκετό για να ευθυγραμμίσετε τα περιεχόμενα του κοντέινερ με κέντρο σε σχέση με την κατακόρυφο, σε όλα τα προγράμματα περιήγησης εκτός από IE.

Τώρα αρχίζουμε να προσθέτουμε ιδιότητες που σχετίζονται με τη στοίχιση για προγράμματα περιήγησης της οικογένειας IE(για αυτούς χρησιμοποιήσαμε πρόσθετα μπλοκ divΚαι σπιθαμή):

Αναφερόμενος στην ετικέτα divμέσα σε ένα μπλοκ τάξης στοίχιση κειμένου. Για να το κάνετε αυτό, πρέπει πρώτα να υποδείξετε το όνομα της κλάσης και, στη συνέχεια, διαχωρισμένα με κενό διάστημα, την ετικέτα στην οποία έχουμε πρόσβαση.

Textalign div(θέση: απόλυτη; κορυφή: 50%; )

Αυτός ο σχεδιασμός σημαίνει: για όλες τις ετικέτες div μέσα σε ένα μπλοκ με μια κλάση στοίχιση κειμένουεφαρμόστε τις αναγραφόμενες ιδιότητες.

Αντίστοιχα, τα στυλ που καθορίζονται για το μπλοκ στοίχιση κειμένουτροποποιούνται:

Textalign( οθόνη: πίνακας-κελί, κατακόρυφη στοίχιση: μέση, πλάτος: 500 εικονοστοιχεία, ύψος: 500 εικονοστοιχεία, θέση: σχετική, )

Τώρα το επάνω αριστερό σημείο του μπλοκ κειμένου μετακινείται προς τα κάτω κατά 50%.

Για να εξηγήσω τι συμβαίνει, σχεδίασα μια εικόνα:

Όπως μπορείτε να δείτε από την εικόνα, έχουμε σημειώσει κάποια πρόοδο. Αλλά δεν είναι μόνο αυτό! Το επάνω αριστερό σημείο του κίτρινου μπλοκ έχει πράγματι μετακινηθεί 50% προς τα κάτω, σε σχέση με το μητρικό (μωβ) μπλοκ. Αλλά χρειαζόμαστε να βρίσκεται στο πενήντα τοις εκατό του ύψους του μωβ μπλοκ. κέντρο του κίτρινου μπλοκ, όχι το πάνω αριστερό σημείο του.

Τώρα η ετικέτα θα μπει στο παιχνίδι σπιθαμήκαι η σχετική του θέση:

Textalign span (θέση: σχετική; επάνω: -50%; )

Έτσι, έχουμε μετατοπίσει το κίτρινο μπλοκ προς τα πάνω κατά 50% του ύψους του, σε σχέση με την αρχική του θέση. Όπως καταλαβαίνετε, το ύψος του κίτρινου μπλοκ είναι ίσο με το ύψος του κεντρικού περιεχομένου. Και η τελευταία λειτουργία στο δοχείο ανοίγματος τοποθέτησε το περιεχόμενό μας στη μέση του μωβ μπλοκ. Ζήτω!

Ας κοροϊδέψουμε λίγο

Πρώτα απ 'όλα, πρέπει να κρύψουμε τον μαϊντανό από όλα τα κανονικά προγράμματα περιήγησης και να τον ανοίξουμε για IE. Αυτό μπορεί να γίνει, φυσικά, χρησιμοποιώντας ένα υπό όρους σχόλιο.

Υπάρχει ένα μικρό πρόβλημα.Εάν το κεντραρισμένο περιεχόμενο είναι πολύ υψηλό, τότε αυτό οδηγεί σε δυσάρεστες συνέπειες: υπάρχει ένα επιπλέον ύψος για την κατακόρυφη κύλιση.

Λύση στο πρόβλημα:πρέπει να προσθέσετε ένα ακίνητο υπερχείλιση: κρυφόςΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ στοίχιση κειμένου.

Γνωρίστε το ακίνητο αναλυτικά ξεχείλισμαδυνατό σε .

Οι τελικές οδηγίες CSS για το μπλοκ στοίχιση κειμένουέχει τη μορφή:

Textalign( οθόνη: πίνακας-κελί, κατακόρυφη στοίχιση: μέση, πλάτος: 500 εικονοστοιχεία, ύψος: 500 εικονοστοιχεία, θέση: σχετική, υπερχείλιση: κρυφή, περίγραμμα: 1 εικονοστοιχείο συμπαγές μαύρο, )

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

Κεντράρισμα σε μπλοκ μεταβλητού ύψους

Πολύ συχνά υπάρχει ανάγκη να ορίσετε το ύψος ενός μπλοκ κλάσης στοίχιση κειμένουόχι σε pixel, αλλά ως ποσοστό του ύψους του γονικού μπλοκ και ευθυγραμμίστε τα περιεχόμενα του κοντέινερ div στη μέση.

Το πρόβλημα είναι ότι είναι αδύνατο να γίνει αυτό για ένα κελί πίνακα (αλλά το μπλοκ κλάσης στοίχιση κειμένουμετατρέπεται ακριβώς σε κελί πίνακα, χάρη στην ιδιότητα οθόνη: πίνακας-κελί).

Σε αυτήν την περίπτωση, πρέπει να χρησιμοποιήσετε ένα εξωτερικό μπλοκ για το οποίο έχει καθοριστεί η ιδιότητα CSS οθόνη: πίνακαςκαι ορίστε ήδη την ποσοστιαία τιμή του ύψους για αυτό. Στη συνέχεια, το μπλοκ φώλιασε σε αυτό, με την οδηγία CSS οθόνη: πίνακας-κελί, θα κληρονομήσει ευτυχώς το ύψος του γονικού μπλοκ.

Για να εφαρμόσουμε ένα μπλοκ μεταβλητού ύψους στο παράδειγμά μας, θα επεξεργαστούμε λίγο το CSS:

Στην τάξη στοίχιση κειμένουθα αλλάξουμε την αξία του ακινήτου απεικόνισηΜε πίνακα-κελίεπί τραπέζικαι να καταργηθεί η οδηγία ευθυγράμμισης κατακόρυφη ευθυγράμμιση: μέση. Τώρα μπορούμε με ασφάλεια να αλλάξουμε την τιμή ύψους από 500 pixel σε, για παράδειγμα, 100%.

Έτσι οι ιδιότητες CSS για το μπλοκ κλάσης στοίχιση κειμένουθα μοιάζει με αυτό:

Textalign( οθόνη: πίνακας, πλάτος: 500 εικονοστοιχεία, ύψος: 100%, θέση: σχετική, υπερχείλιση: κρυφή, περίγραμμα: 1 εικονοστοιχείο συμπαγές μαύρο, )

Το μόνο που μένει είναι να εφαρμοστεί το κεντράρισμα περιεχομένου. Για να γίνει αυτό, ένα κοντέινερ div τοποθετήθηκε σε ένα μπλοκ κλάσης στοίχιση κειμένου(αυτό είναι το ίδιο κίτρινο μπλοκ στην εικόνα), πρέπει να ορίσετε την ιδιότητα CSS οθόνη: πίνακας-κελί, τότε θα κληρονομήσει το ύψος του 100% από το γονικό μπλοκ στοίχιση κειμένου(μωβ μπλοκ). Και τίποτα δεν θα μας εμποδίσει να ευθυγραμμίσουμε τα περιεχόμενα του ένθετου δοχείου div στο κέντρο με την ιδιότητα κατακόρυφη ευθυγράμμιση: μέση.

Λαμβάνουμε μια άλλη πρόσθετη λίστα ιδιοτήτων CSS για το μπλοκ div που είναι ένθετο στο κοντέινερ στοίχιση κειμένου.

Textalign div( οθόνη: πίνακας-κελί, κατακόρυφη στοίχιση: μέση; )

Αυτό είναι όλο το κόλπο. Εάν θέλετε, μπορείτε να έχετε μεταβλητό ύψος με το περιεχόμενο στο κέντρο.

Για περισσότερες πληροφορίες σχετικά με την κατακόρυφη ευθυγράμμιση ενός μπλοκ μεταβλητού ύψους, βλ.

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

Ευθυγράμμιση μπλοκ με γνωστά μεγέθη

Ο ευκολότερος τρόπος χρήσης CSS είναι να ευθυγραμμίσετε μπλοκ που έχουν γνωστό ύψος (για κάθετη στοίχιση) ή πλάτος (για οριζόντια στοίχιση).

Ευθυγράμμιση με χρήση επένδυσης

Μερικές φορές δεν μπορείτε να κεντράρετε ένα στοιχείο, αλλά να προσθέσετε περιθώρια σε αυτό χρησιμοποιώντας το " υλικό παραγεμίσματος".

Για παράδειγμα, υπάρχει μια εικόνα 200 επί 200 εικονοστοιχεία και πρέπει να την κεντράρετε σε ένα μπλοκ 240 επί 300. Μπορούμε να ορίσουμε το ύψος και το πλάτος του εξωτερικού μπλοκ = 200 εικονοστοιχεία και να προσθέσουμε 20 εικονοστοιχεία στο επάνω και στο κάτω μέρος , και 50 αριστερά και δεξιά.

.example-wrapper1 ( φόντο : #535E73 ; πλάτος : 200 εικονοστοιχεία , ύψος : 200 εικονοστοιχεία , επένδυση : 20 εικονοστοιχεία 50 εικονοστοιχεία ; )

Ευθυγράμμιση απόλυτα τοποθετημένων μπλοκ

Εάν το μπλοκ έχει οριστεί σε " θέση: απόλυτη", τότε μπορεί να τοποθετηθεί σε σχέση με τον πλησιέστερο γονέα του με "θέση: σχετική". Αυτό απαιτεί όλες τις ιδιότητες (" μπλουζα","σωστά","κάτω μέρος","αριστερά") του εσωτερικού μπλοκ για να εκχωρήσετε την ίδια τιμή, καθώς και το "margin: auto".

*Υπάρχει μια απόχρωση: Το πλάτος (ύψος) του εσωτερικού μπλοκ + η τιμή του αριστερού (δεξιά, κάτω, πάνω) δεν πρέπει να υπερβαίνει τις διαστάσεις του γονικού μπλοκ. Είναι ασφαλέστερο να αντιστοιχίσετε 0 (μηδέν) στις αριστερές (δεξιά, κάτω, πάνω) ιδιότητες.

.example-wrapper2 (θέση: σχετική; ύψος: 250 εικονοστοιχεία; φόντο: url(space.jpg) ;) .cat-king (πλάτος: 200 εικονοστοιχεία; ύψος: 200 εικονοστοιχεία; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0 ; δεξιά : 0 ;

Οριζόντια ευθυγράμμιση

Στοίχιση με χρήση "text-align: center"

Για να στοιχίσετε κείμενο σε ένα μπλοκ υπάρχει μια ειδική ιδιότητα " στοίχιση κειμένου". Όταν έχει οριστεί σε " κέντρο"Κάθε γραμμή κειμένου θα στοιχίζεται οριζόντια. Για κείμενο πολλών γραμμών, αυτή η λύση χρησιμοποιείται εξαιρετικά σπάνια· πιο συχνά αυτή η επιλογή μπορεί να βρεθεί για τη στοίχιση διαστημάτων, συνδέσμων ή εικόνων.

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

.example-text (text-align : center ; padding : 10px ; background : #FF90B8 ; )

Αξίζει να σημειωθεί ότι αυτή η ιδιότητα θα λειτουργεί όχι μόνο για κείμενο, αλλά και για τυχόν ενσωματωμένα στοιχεία ("display: inline").

Αλλά αυτό το κείμενο είναι στοιχισμένο προς τα αριστερά, αλλά βρίσκεται σε ένα μπλοκ που βρίσκεται στο κέντρο σε σχέση με το περιτύλιγμα.

.example-wrapper3 (text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; πλάτος : 40% ; padding : 10 px ; text-align : left ; background : #FFE5E5 ; )

Ευθυγράμμιση μπλοκ με χρήση περιθωρίου

Τα στοιχεία μπλοκ με γνωστό πλάτος μπορούν εύκολα να ευθυγραμμιστούν οριζόντια, ρυθμίζοντάς τα σε "margin-left: auto; margin-right: auto". Συνήθως χρησιμοποιείται η συντομογραφία: " περιθώριο: 0 αυτόματο" (μπορεί να χρησιμοποιηθεί οποιαδήποτε τιμή αντί για μηδέν). Αλλά αυτή η μέθοδος δεν είναι κατάλληλη για κάθετη στοίχιση.

.lama-wrapper (ύψος: 200 εικονοστοιχεία; φόντο: #F1BF88;) .lama1 (ύψος: 200 εικονοστοιχεία; πλάτος: 200 εικονοστοιχεία; φόντο: url(lama.jpg) ; περιθώριο: 0 αυτόματο; )

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

Κατακόρυφη στοίχιση

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

Ευθυγράμμιση με την ιδιότητα line-height

Στην περίπτωση που υπάρχει μόνο μία γραμμή σε ένα μπλοκ, μπορείτε να επιτύχετε την κατακόρυφη ευθυγράμμισή του χρησιμοποιώντας το " ύψος γραμμής" και ρυθμίστε το στο επιθυμητό ύψος. Για αξιοπιστία, αξίζει να ρυθμίσετε και το "height", η τιμή του οποίου θα είναι ίση με την τιμή "line-height", επειδή το τελευταίο δεν υποστηρίζεται σε όλα τα προγράμματα περιήγησης.

.example-wrapper4 (ύψος γραμμής: 100 εικονοστοιχεία; χρώμα: #DC09C0; φόντο: #E5DAE1; ύψος: 100 εικονοστοιχεία; στοίχιση κειμένου: κέντρο; )

Είναι επίσης δυνατό να επιτευχθεί ευθυγράμμιση μπλοκ με πολλές γραμμές. Για να το κάνετε αυτό, θα πρέπει να χρησιμοποιήσετε ένα πρόσθετο μπλοκ περιτυλίγματος και να ορίσετε το ύψος της γραμμής σε αυτό. Ένα εσωτερικό μπλοκ μπορεί να είναι πολλαπλών γραμμών, αλλά πρέπει να είναι "ενσωματωμένο". Πρέπει να εφαρμόσετε το "vertical-align: middle" σε αυτό.

.example-wrapper5 (ύψος γραμμής: 160 εικονοστοιχεία; ύψος: 160 εικονοστοιχεία; μέγεθος γραμματοσειράς: 0; φόντο: #FF9B00; ) .example-wrapper5 .text1 (εμφάνιση: inline-block; μέγεθος γραμματοσειράς: 4 γραμμή: 1. 1,5 ;

Το μπλοκ περιτυλίγματος πρέπει να έχει οριστεί "μέγεθος γραμματοσειράς: 0". Εάν δεν ορίσετε το μέγεθος της γραμματοσειράς στο μηδέν, το πρόγραμμα περιήγησης θα προσθέσει μερικά επιπλέον pixel. Θα πρέπει επίσης να καθορίσετε το μέγεθος γραμματοσειράς και το ύψος γραμμής για το εσωτερικό μπλοκ, επειδή αυτές οι ιδιότητες κληρονομούνται από το γονικό.

Κάθετη στοίχιση σε πίνακες

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

Συνήθως χρησιμοποιώ αυτήν την επιλογή για κάθετη στοίχιση. Παρακάτω είναι ένα παράδειγμα διάταξης από ένα ολοκληρωμένο έργο. Είναι η εικόνα που είναι κεντραρισμένη κάθετα με αυτόν τον τρόπο που έχει ενδιαφέρον.

.one_product .img_wrapper ( οθόνη : πίνακας-κελί ; ύψος : 169 εικονοστοιχεία ; κατακόρυφη στοίχιση : μέση ; υπερχείλιση : κρυφό ; φόντο : #fff ; πλάτος : 255 εικονοστοιχεία ; ) .one_product img ( μέγ. ύψος : 169 εικονοστοιχεία πλάτος : μέγ. % ελάχ. πλάτος : 140 px : μπλοκ ;

Θα πρέπει να θυμόμαστε ότι εάν ένα στοιχείο έχει ένα σύνολο "float" εκτός από το "κανένα", τότε σε κάθε περίπτωση θα είναι μπλοκ (εμφάνιση: μπλοκ) - τότε θα πρέπει να χρησιμοποιήσετε ένα πρόσθετο περιτύλιγμα μπλοκ.

Ευθυγράμμιση με ένα πρόσθετο ενσωματωμένο στοιχείο

Και για ενσωματωμένα στοιχεία μπορείτε να χρησιμοποιήσετε " κατακόρυφη ευθυγράμμιση: μέση". Επιπλέον, όλα τα στοιχεία με " οθόνη: ενσωματωμένη" που βρίσκονται στην ίδια γραμμή θα ευθυγραμμιστούν με μια κοινή κεντρική γραμμή.

Πρέπει να δημιουργήσετε ένα βοηθητικό μπλοκ με ύψος ίσο με το ύψος του γονικού μπλοκ και, στη συνέχεια, το επιθυμητό μπλοκ θα κεντραριστεί. Για να γίνει αυτό, είναι βολικό να χρησιμοποιήσετε τα ψευδοστοιχεία:πριν ή:μετά.

.example-wrapper6 (ύψος : 300 px ; στοίχιση κειμένου : κέντρο ; φόντο : #70DAF1 ; ) .pudge ( οθόνη : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; 200 px ; 200 px ;

Οθόνη: ευθυγράμμιση και ευθυγράμμιση

Εάν δεν ενδιαφέρεστε πολύ για τους χρήστες του Explorer 8 ή σας ενδιαφέρουν τόσο πολύ που είστε διατεθειμένοι να εισαγάγετε ένα κομμάτι επιπλέον javascript για αυτούς, τότε μπορείτε να χρησιμοποιήσετε το "display: flex". Τα Flex boxes είναι εξαιρετικά στην αντιμετώπιση προβλημάτων ευθυγράμμισης και απλώς γράψτε "margin: auto" για να κεντράρετε το περιεχόμενο μέσα.

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

.example-wrapper7 ( οθόνη : flex ; ύψος : 300 px ; φόντο : #AEB96A ; ) .example-wrapper7 img ( περιθώριο : auto ; )

Λοιπόν, αυτό ήταν το μόνο που ήθελα να γράψω για την ευθυγράμμιση CSS. Τώρα το κεντράρισμα περιεχομένου δεν θα είναι πρόβλημα!

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

Ευθυγράμμιση μπλοκ στο κέντρο

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

< div id = "wrapper" > < div id = "header" > < / div > < / div >

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

#επί κεφαλής( πλάτος / μέγιστο πλάτος : 800 εικονοστοιχεία ; περιθώριο: 0 αυτόματο;

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

Στοίχιση κειμένου

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

Στοίχιση κειμένου κάθετα

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

Ρυθμίστε το ύψος του μπλοκ χρησιμοποιώντας το padding. Ο τρόπος δεν είναι να ορίσετε ένα σαφές ύψος χρησιμοποιώντας το ύψος, αλλά να το δημιουργήσετε τεχνητά χρησιμοποιώντας επιθέματα στο επάνω και στο κάτω μέρος, τα οποία θα πρέπει να είναι τα ίδια. Ας δημιουργήσουμε οποιοδήποτε μπλοκ και ας γράψουμε τις ακόλουθες ιδιότητες σε αυτό:

div( φόντο: #cccc; padding: 30px 0; )

div( φόντο : #ccc; padding: 30px 0;

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

Ορίστε το ύψος γραμμής για το μπλοκ. Νομίζω ότι αυτός είναι ένας πιο σωστός τρόπος εάν χρειάζεται να στοιχίσετε μία γραμμή κειμένου. Με αυτό, μπορείτε να γράψετε το ύψος σύμφωνα με το κανονικό, χρησιμοποιώντας την ιδιότητα ύψους. Μετά από αυτό, πρέπει επίσης να ορίσει το ύψος της γραμμής, το ίδιο με το ύψος του μπλοκ στο σύνολό του.

div (ύψος: 60 εικονοστοιχεία, ύψος γραμμής: 60 εικονοστοιχεία; )

div( ύψος: 60 px; Ύψος γραμμής: 60 px;

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

Μετατροπή ενός μπλοκ σε κελί πίνακα. Η ουσία αυτής της μεθόδου είναι ότι το κελί του πίνακα έχει την ιδιότητα vertical-align: middle, η οποία κεντράρει το στοιχείο κατακόρυφα. Αντίστοιχα, σε αυτήν την περίπτωση το μπλοκ πρέπει να οριστεί ως εξής:

div( οθόνη: πίνακας-κελί, κατακόρυφη στοίχιση: μέση; )

div( οθόνη: πίνακας - κελί; κατακόρυφη ευθυγράμμιση: μέση;

Αυτή η μέθοδος είναι καλή γιατί μπορείτε να στοιχίσετε όσο κείμενο θέλετε στο κέντρο. Αλλά είναι καλύτερα να γράψουμε display: table στο μπλοκ στο οποίο είναι ένθετο το div μας, διαφορετικά μπορεί να μην λειτουργεί.

Λοιπόν, εδώ φτάνουμε στην τελευταία τεχνική για σήμερα - αυτή είναι η κάθετη ευθυγράμμιση των ίδιων των μπλοκ. Πρέπει να πούμε ότι, και πάλι, δεν υπάρχει καμία ιδιοκτησία που θα προοριζόταν ειδικά για αυτό, αλλά υπάρχουν μερικά κόλπα που πρέπει να γνωρίζετε.

Ορίστε τις εσοχές ως ποσοστό. Εάν γνωρίζετε το ύψος ενός γονικού στοιχείου και τοποθετήσετε ένα άλλο στοιχείο μπλοκ μέσα σε αυτό, μπορείτε να το κεντράρετε χρησιμοποιώντας ποσοστιαία συμπλήρωση. Για παράδειγμα, ο γονέας έχει ύψος 600 pixel. Τοποθετείτε ένα μπλοκ σε αυτό που έχει ύψος 300 pixel. Πόσο πρέπει να κάνετε πίσω στο πάνω και στο κάτω μέρος για να το κεντράρετε; 150 pixel το καθένα, που είναι το 25% του ύψους του γονέα.

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

Εισαγάγετε ένα στοιχείο σε ένα κελί πίνακα. Και πάλι, αν μετατρέψουμε το γονικό στοιχείο σε κελί πίνακα, τότε το μπλοκ που εισάγεται σε αυτό θα κεντραριστεί αυτόματα κατακόρυφα. Για να γίνει αυτό, ο γονέας χρειάζεται απλώς να ορίσει κάθετη στοίχιση: μέση.

Και αν, εκτός από αυτό, γράψουμε και margin: 0 auto, τότε το στοιχείο θα γίνει οριζόντια στο κέντρο!