Ευθυγράμμιση στοιχείων html. Κάθετη στοίχιση CSS για όλους

Ένας σχεδιαστής έχει μερικές φορές μια ερώτηση: πώς να κεντράρει τα στοιχεία κάθετα; Και αυτό προκαλεί ορισμένα προβλήματα. Ωστόσο, υπάρχουν αρκετές μέθοδοι για κάθετα κεντράρισμα στοιχείων και καθεμία από αυτές τις μεθόδους είναι αρκετά απλή. Αυτό το άρθρο περιγράφει μερικές από αυτές τις μεθόδους.

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

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

Κάθετη-Ευθυγράμμιση

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

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

Ωστόσο, το χαρακτηριστικό valign λειτουργεί μόνο όταν εφαρμόζεται σε ένα κελί (για παράδειγμα, ). Η ιδιότητα κάθετης στοίχισης CSS μπορεί να εφαρμοστεί σε ένα κελί και σε ορισμένα ενσωματωμένα στοιχεία.

• Το κείμενο είναι κεντραρισμένο σε σχέση με το ύψος γραμμής (διάστιχο).
• Σε σχέση με τον πίνακα, χωρίς να μπούμε σε λεπτομέρειες, γίνεται κεντράρισμα σε σχέση με το ύψος της σειράς.

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

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

Διάστιχο ή Ύψος γραμμής

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

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

Σε αυτήν την περίπτωση, δεν είναι απαραίτητο να καθορίσετε το ύψος του γονικού στοιχείου.

Εδώ είναι το κείμενο
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
• Απαιτεί δοχείο ή στυλ στο σώμα
• Απαιτεί μεγάλη ποικιλία προθεμάτων για να λειτουργήσει σωστά στα σύγχρονα προγράμματα περιήγησης
• Πιθανά προβλήματα απόδοσης

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