Όλοι όσοι ασχολούνται με τη διάταξη αργά ή γρήγορα αντιμετωπίζουν την ανάγκη να ευθυγραμμίσουν τα στοιχεία κάθετα... και γνωρίζουν ποιες δυσκολίες μπορεί να προκύψουν κατά την ευθυγράμμιση ενός στοιχείου στο κέντρο. Το CSS έχει μια ιδιότητα «vertical-align» με πολλαπλές τιμές που, λογικά, θα έπρεπε να κάνει κατακόρυφη στοίχιση. Ωστόσο, στην πράξη δεν λειτουργεί όπως αναμενόταν.

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

1. Ευθυγράμμιση με τραπέζι

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

HTML

css

Εξωτερικό (πλάτος : 200 εικονοστοιχεία ; ύψος : 200 εικονοστοιχεία , στοίχιση κειμένου : κέντρο , κατακόρυφη στοίχιση : μέση , χρώμα φόντου : #ffc ; )

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

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

HTML

css

Εξωτερικό περιτύλιγμα ( οθόνη : πίνακας ; ) .εξωτερικό ( οθόνη : πίνακας-κελί ; )

2. Ευθυγράμμιση με επένδυση

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

css

Εξωτερικό (ύψος: 200 px;) .εσωτερικό (ύψος: 100 px; περιθώριο: 50 px 0;)

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

3. Ευθυγράμμιση με γραμμή-ύψος

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

css

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

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

css

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

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

4. Ευθυγράμμιση με "stretch"

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

Να εφαρμόσει αυτή τη μέθοδοΧρειαζόμαστε:

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

css

Εξωτερικό (θέση: σχετική;) .εσωτερικό (ύψος: 100 εικονοστοιχεία; θέση: απόλυτη; επάνω: 0; κάτω: 0; περιθώριο: αυτόματο 0;)

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

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

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

css

Εξωτερικό (θέση : σχετική

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

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

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

css

Εξωτερική (θέση: σχετική;) .εσωτερική (θέση: απόλυτη; επάνω: 50%; μετατροπή: translateY (-50%);

7. Ευθυγράμμιση με ψευδοστοιχείο

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

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

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

css

Εξωτερικό :πριν (οθόνη: inline-block; ύψος: 100%; κατακόρυφη στοίχιση: μεσαίο; περιεχόμενο: "" ;) .inner (οθόνη: inline-block; κατακόρυφη στοίχιση: μεσαίο; )

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

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

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

css,

HTML

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

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

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

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

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

Υπάρχουν δύο στοιχεία div, με το ένα να βρίσκεται μέσα στο άλλο. Ας τους δώσουμε τις κατάλληλες κλάσεις − outer and inner .

Ο στόχος είναι να ευθυγραμμιστεί το εσωτερικό στοιχείο με το κέντρο του εξωτερικού στοιχείου.

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

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

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

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

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

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

Ευθυγράμμιση με τραπέζι

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

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/

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

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

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

Stretch Alignment

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

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

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

.εξωτερικό (θέση: σχετική; ) .εσωτερικό (ύψος: 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

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

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

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

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

Ποιον τρόπο να επιλέξω;

Είναι απαραίτητο να προχωρήσουμε από τη δήλωση του προβλήματος:

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

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

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

Ως παράδειγμα, εξετάστε το ακόλουθο απόσπασμα:

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

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

"Κατάλληλα" προγράμματα περιήγησης (συμπεριλαμβανομένου του MSIE

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

div (
display:table-cell;
κατακόρυφη ευθυγράμμιση: μέση;
}

div (
display:table-cell;
κατακόρυφη ευθυγράμμιση: κάτω;
}

Internet Explorer (έως και την έκδοση 7)

Μπορείτε να λύσετε το πρόβλημα της ευθυγράμμισης κειμένου στο κάτω μέρος ενός μπλοκ στο MSIE χρησιμοποιώντας απόλυτη τοποθέτηση (εδώ χρειαζόμαστε ένα ενσωματωμένο στοιχείο ένθετο σε ένα μπλοκ):

div (
θέση: σχετική;
}
div span(
display:block;
θέση: απόλυτη;
κάτω: 0%;
αριστερά: 0%
πλάτος: 100%
}

Αυτό το σύνολο κανόνων λειτουργεί και στα "σωστά" προγράμματα περιήγησης.

Προσδιορίστε ιδιότητες

div span (
display:block;
πλάτος: 100%
}

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

Για να ευθυγραμμίσετε κάθετα το κείμενο στο κέντρο του μπλοκ, το αρχικό τμήμα θα πρέπει να είναι ακόμα πολύπλοκο - ας εισαγάγουμε ένα ακόμη ενσωματωμένο στοιχείο:

Υλικό για μελέτη:

• Κάθετο κεντράρισμα σε CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Κάθετο κεντράρισμα με χρήση CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Κάθετη στοίχιση (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Ένας άλλος τρόπος για κάθετη στοίχιση στο CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

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

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

Εδώ είναι δύο στοιχεία div:

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

γραμμή-ύψος για μία γραμμή

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

Δεν θα μπορείτε να χρησιμοποιήσετε το line-height=100% ως ποσοστό, επειδή το 100% σε αυτήν την περίπτωση είναι το ύψος της γραμματοσειράς.

Δοχείο(
ύψος: 300 px;
Ύψος γραμμής: 300 px
}

Εσωτερικός(
λευκό διάστημα: nowrap;
υπερχείλιση: κρυφό;
}

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

Τραπέζι με κατακόρυφη ευθυγράμμιση

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

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

Στο πρώτο παράδειγμα, ένα κελί μεμονωμένου πίνακα γίνεται το εξωτερικό μπλοκ.

Δοχείο(
display:table-cell;
κατακόρυφη ευθυγράμμιση: μέση;
}

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

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

Εξωτερικό περιτύλιγμα (
οθόνη:πίνακας;
}

Δοχείο(
display:table-cell;
κατακόρυφη ευθυγράμμιση: μέση;
}

Θέση: απόλυτο + αρνητικό περιθώριο

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

Μια κορυφαία τιμή ιδιότητας 50% κάνει το ένθετο στοιχείο να τοποθετηθεί στο επάνω μέρος στο μέσο του εξωτερικού κουτιού. Μένει να το σηκώσουμε με αρνητικό περιθώριο-κορυφή στο μισό του ύψους του ώστε να στέκεται ακριβώς στο κέντρο της κάθετης.

Δοχείο(
θέση: σχετική;
}

Εσωτερικός(
ύψος: 140 px;
θέση: απόλυτη;
κορυφή: 50%;
margin-top: -70px;
}

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

Ενσωματωμένη στοίχιση με κάθετη στοίχιση

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

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

Για το εξωτερικό μπλοκ, προβλέπεται το κεντράρισμα μιας γραμμής.

Δοχείο(
ύψος: 140 px;
Ύψος γραμμής: 140 px;
}

Η τιμή ύψους γραμμής για το εσωτερικό μπλοκ παρακάμπτεται σε κανονική ή σε οποιαδήποτε τιμή θέλετε. Του δίνεται επίσης η στοίχιση vertical-align: middle και conversion σε inline-block type - display: inline-block.

Εσωτερικός(
οθόνη: inline-block
γραμμή-ύψος: κανονικό
κατακόρυφη ευθυγράμμιση: μέση;
}

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

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

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

Η επάνω ιδιότητα με τιμή 50% χαμηλώνει το εσωτερικό κουτί έτσι ώστε η επάνω άκρη της να βρίσκεται στη μέση του γονέα. Η τιμή translateY: -50% αυξάνει το στοιχείο κατά το ήμισυ του ύψους του και έτσι ευθυγραμμίζει τα κατακόρυφα κέντρα των πλαισίων.

Δοχείο(
θέση: σχετική;
}

Εσωτερικός(
θέση: απόλυτη;
κορυφή: 50%;
transform: translateY(-50%);
}

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

Ευθυγράμμιση μέσω ψευδοστοιχείου

Η μέθοδος λειτουργεί όταν το ύψος είναι άγνωστο είτε για το πρώτο είτε για το δεύτερο μπλοκ. Ένα ενσωματωμένο ψευδοστοιχείο inline-block προστίθεται στο εσωτερικό του γονέα χρησιμοποιώντας το πριν ή το μετά. Το ύψος του προστιθέμενου στοιχείου πρέπει να είναι ίσο με το ύψος του γονέα - ύψος: 100%. Η κατακόρυφη στοίχιση του περιεχομένου ορίζεται με κάθετη στοίχιση: μέση.

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

Δοχείο:πριν (
περιεχόμενο: "";
ύψος: 100%;
κατακόρυφη ευθυγράμμιση: μέση;
οθόνη: inline-block
}

Εσωτερικός(
οθόνη: inline-block
κατακόρυφη ευθυγράμμιση: μέση;
}

Καθολικός τρόπος. Δεν λειτουργεί εάν το εσωτερικό μπλοκ έχει ρυθμιστεί σε απόλυτη θέση.

Flexbox

Ο νεότερος και ευκολότερος τρόπος για να ευθυγραμμίσετε στοιχεία κάθετα. Το Flexbox σάς επιτρέπει να τακτοποιείτε τα στοιχεία μιας ιστοσελίδας με όποιον τρόπο θέλετε. Για να κεντράρετε ένα μπλοκ, απλώς ρυθμίστε τον γονέα να εμφανίζει: flex και το παιδί στο περιθώριο: auto.

Δοχείο(
οθόνη:flex;
πλάτος: 320 px
ύψος: 140 px;
}

Εσωτερικός(
πλάτος: 120 px
περιθώριο: αυτόματο;
}

Το Flexbox λειτουργεί μόνο σε σύγχρονα προγράμματα περιήγησης.

Επιλογή μεθόδου

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

Το ύψος των στοιχείων είναι άγνωστο

Σε αυτήν την περίπτωση, μπορείτε να χρησιμοποιήσετε μία από τις τέσσερις καθολικές μεθόδους:

1. Πίνακας. Το γονικό είναι ένα κελί πίνακα που δημιουργήθηκε σε HTML ή μέσω display-table/display-cell. Σε αυτό το γονικό στοιχείο δίνεται κάθετη στοίχιση: μέση.

2. Ψευδοστοιχείο. Για το εξωτερικό μπλοκ, δημιουργείται ένα ψευδοστοιχείο inline-block με πλάτος=100% και κάθετη στοίχιση: μέση. Στο παιδί εμφανίζεται η οθόνη: inline-block και κάθετη-align: μεσαία. Η μέθοδος δεν λειτουργεί μόνο όταν δίνεται απόλυτη τοποθέτηση στο εσωτερικό μπλοκ.

3. Μεταμόρφωση. Ο γονέας παίρνει θέση: συγγενής. Στο παιδί δίνεται η θέση: απόλυτη, κορυφή: 50% και μετασχηματισμός: translateY(-50%);

4 Flexbox. Το εξωτερικό μπλοκ έχει ρυθμιστεί να εμφανίζει: flex, το εσωτερικό μπλοκ έχει οριστεί στο περιθώριο: auto.

Μόνο το ύψος του παιδιού είναι γνωστό

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

Μία γραμμή ανά μπλοκ με γνωστό ύψος

Το εξωτερικό πλαίσιο ορίζεται στην ιδιότητα line-height με τιμή ίση με το ύψος του.

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

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

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

Εάν το έχετε δοκιμάσει ποτέ, τότε είναι δύσκολο, ειδικά αν θέλετε να αποφύγετε τη χρήση πινάκων. Ευτυχώς, οι κραυγές μας για βοήθεια ακούστηκαν και ένα από τα νέα όπλα που προστέθηκαν στο οπλοστάσιο CSS για την αντιμετώπιση αυτού του προβλήματος είναι ο τύπος διάταξης που είναι γνωστός ως διάταξη ευέλικτου κουτιού. Όπως θα διαπιστώσετε σε λίγα λεπτά, σας παρέχει μερικές πραγματικά εξαιρετικές δυνατότητες για την απλοποίηση πολύπλοκων διατάξεων. Μέρος αυτής της εξαιρετικής λειτουργικότητας σάς επιτρέπει επίσης να κεντράρετε το περιεχόμενό σας κάθετα και οριζόντια, κάτι που θα καλύψουμε σε αυτό το σεμινάριο. Μπορείτε να το κάνετε αυτό με padding σε κάποιο βαθμό, αλλά μπορεί να οδηγήσει τη διάταξή σας σε μικρότερες οθόνες. Η προσθήκη μιας προσαρμοσμένης κλάσης CSS στο φύλλο στυλ σας σημαίνει ότι μπορείτε να κεντράρετε κάθετα οποιοδήποτε περιεχόμενο σε δευτερόλεπτα.

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

Πρώτη μέθοδος με ύψος γραμμής

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

css

Constutesim_first(
περίγραμμα: 2px συμπαγές #bf1515;
ύψος: 175px;
}
.constutesim_first > p(
line-height:175px;
περιθώριο: 0;
text-align:center;
padding: 0;
μέγεθος γραμματοσειράς: 17 px;
χρώμα: #3152a0;
γραμματοσειρά-οικογένεια: Tahoma;
βάρος γραμματοσειράς: έντονη;
}

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

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

css

Δεύτερη παραλλαγή(
περίγραμμα: 2px συμπαγές κόκκινο.
line-height:158px;
}

Δεύτερη παραλλαγή div(
text-align:center;
}
.second-variation img (
κατακόρυφη ευθυγράμμιση: μέση;
περίγραμμα: 0px συμπαγές #3a3838;
}

Υλοποιούμε στιγμιότυπα εικόνας στο κέντρο και κάθετα.

Ευθυγράμμιση με την ιδιότητα θέσης

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

css

Competaird-option (
περίγραμμα: 2px συμπαγές #d40e0e;
ύψος: 162 px;
θέση: σχετική;
}
.competaird-option div (
θέση: απόλυτη;
κορυφή: 50%;
αριστερά: 50%
ύψος: 28%;
πλάτος: 49%
περιθώριο: -2% 0 0 -25%;
περίγραμμα: 2px συμπαγές #4a4848;
}

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

Ευθυγράμμιση με την ιδιότητα πίνακα

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

Cherevert-variation (
περίγραμμα: 2px στερεό #c30b0b;
ύψος: 173px;
οθόνη:πίνακας;
πλάτος: 100%
μέγεθος γραμματοσειράς: 17 px;
βάρος γραμματοσειράς: έντονη;
χρώμα: #3945a0;
}

Cherevert-variation div(
display:table-cell;
κατακόρυφη ευθυγράμμιση: μέση;
text-align:center;
}

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

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

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

css

Παραλλαγή-οριζόντια (
περίγραμμα: 2px στερεό #d20c0c;
ύψος: 147 px;
οθόνη:flex;
στοίχιση-στοιχεία: κέντρο;
justify-content: κέντρο;
μέγεθος γραμματοσειράς: 18 px;
βάρος γραμματοσειράς: έντονη;
χρώμα: #49518c;
}

Μπορείτε να καθορίσετε μια τιμή για το ύψος γραμμής όπως ακριβώς θα προσδιορίζατε οποιοδήποτε άλλο μέγεθος στο css, είτε ως αριθμό, είτε ως μέγεθος pixel ή ως ποσοστό.

Ευθυγράμμιση με την ιδιότητα μετασχηματισμού

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

css

vertical-medilpasudsa (
περίγραμμα: 2px στερεό #e00a0a;
ύψος: 158 px;
μέγεθος γραμματοσειράς: 19px;
βάρος γραμματοσειράς: έντονη;
χρώμα: #353c71;
}
.vertical-medilpasudsa > div(
θέση: σχετική;
κορυφή: 50%;
transform: translateY(-50%);
text-align:center;
}

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

Εάν θέλετε να κεντράρετε τους χαρακτήρες οριζόντια σε ένα στοιχείο, πρέπει να χρησιμοποιήσετε το text-align: center. Μια επιλογή, εάν θέλετε να το κεντράρετε κατακόρυφα και έχετε σταθερό υποσέλιδο κεφαλίδας και μια σειρά κειμένου, ορίστε το ύψος της γραμμής να είναι το ίδιο ύψος με το υποσέλιδο σας.

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

Το Text-align έχει αρκετές έγκυρες ιδιότητες:

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

Χρησιμοποιήστε αυτές τις ιδιότητες για να ευθυγραμμίσετε το κείμενο μέσα σε ένα γονικό ή περιτύλιγμα div. Εάν θέλετε να κεντράρετε το κείμενο οριζόντια σε ένα στοιχείο, πρέπει να χρησιμοποιήσετε το text-align: center.

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