6 κόλπα CSS για την ευθυγράμμιση του περιεχομένου κάθετα
Ας μιλήσουμε για την κάθετη ευθυγράμμιση στο CSS, ή για να είμαστε ακριβέστεροι πώς δεν είναι εφικτό. Το CSS δεν έχει παράσχει ακόμη έναν επίσημο τρόπο για να κεντράρει το περιεχόμενο κάθετα μέσα στο δοχείο του. Είναι ένα πρόβλημα που πιθανώς έχει απογοητεύσει τους προγραμματιστές ιστού παντού. Αλλά για να μην φοβόμαστε, σε αυτή τη θέση, θα σας τρέξουμε μερικά κόλπα που θα σας βοηθήσουν μιμηθεί το αποτέλεσμα.
Αυτά τα κόλπα μπορεί ωστόσο να έχουν περιορισμούς και ίσως χρειαστεί χρησιμοποιήστε περισσότερα από ένα τέχνασμα για να ολοκληρώσετε την ψευδαίσθηση. Αν γνωρίζετε κάποιο άλλο τέχνασμα, ενημερώστε μας στα σχόλια.
1. Χρησιμοποιήστε την απόλυτη τοποθέτηση
Το πρώτο κόλπο που θα δούμε εδώ χρησιμοποιεί το Θα θέσουμε πρώτα τη θέση του στοιχείου δοχείου σε σχετική, στη συνέχεια, θέτουμε τη θέση του παιδικού στοιχείου σε Για να το ευθυγραμμίσετε κατακόρυφα, μετακινήστε τη θέση του παιδικού στοιχείου από την κορυφή, το ήμισυ του ύψους του κιβωτίου και τραβήξτε το μέχρι το μισό του πλάτους του παιδικού στοιχείου. Εδώ είναι η έξοδος: Αυτό το τέχνασμα είναι τέλειο όταν υπάρχει μόνο ένα παιδικό στοιχείο, αλλιώς το Μετασχηματισμός CSS3 έχει καταστήσει εύκολη την τοποθέτηση περιεχομένου στο κέντρο. Μετασχηματισμός CSS3, σε αντίθεση με το Υποθέτοντας ότι έχουμε την ίδια δομή HTML με την προηγούμενη μέθοδο - ένα γονικό, ένα παιδικό στοιχείο - Λάβετε υπόψη ότι οι μετασχηματισμοί CSS3 δεν θα λειτουργήσουν στον Internet Explorer 8 και κάτω. Ίσως θελήσετε να χρησιμοποιήσετε κάποια από τις άλλες μεθόδους εδώ ως εναλλακτική λύση. Μπορούμε επίσης να χρησιμοποιήσουμε Αυτό το τέχνασμα είναι κατάλληλο για όταν δεν ρυθμίζετε το δοχείο σε σταθερό πλάτος, απλά ρυθμίστε το πλάτος σε Αν έχετε μόνο μία γραμμή κειμένου σε ένα κοντέινερ, μπορείτε να ευθυγραμμίσετε το κείμενο κάθετα χρησιμοποιώντας το Θυμηθείτε ότι αυτό το τέχνασμα λειτουργεί μόνο με μια μόνο γραμμή κειμένου. Εάν το περιεχόμενο σπάσει σε δύο ή περισσότερες γραμμές, το διάστημα μεταξύ κάθε γραμμής θα είναι όπως καθορίσαμε στο Προσωπικά, ο πίνακας CSS είναι το αγαπημένο μου τέχνασμα για την εφαρμογή κατακόρυφης ευθυγράμμισης. Λειτουργεί σε παλιά προγράμματα περιήγησης όπως ο Internet Explorer 8. Αυτή η μέθοδος γίνεται με ρύθμιση της εμφάνισης του στοιχείου δοχείου σε Η τελευταία μέθοδος στο κάθετο κεντράρισμα γίνεται με τη χρήση του Flexbox. Το Flexbox είναι μια νέα ενότητα στο CSS3. Προσφέρει μια πιο απλή μέθοδο ευθυγράμμισης περιεχομένου. Για να κεντράρετε το περιεχόμενο κάθετα στο κιβώτιο flex, απλά προσθέστε Λάβετε υπόψη ότι ορισμένα προγράμματα περιήγησης Flexbox υποστηρίζουν μόνο τη λειτουργία μεμονωμένων στοιχείων της μονάδας Flexbox, όπως το Internet Explorer 10, το Safari, το 6 και το Chrome 27 και παρακάτω. Ως εκ τούτου, παρόμοιο με το τέχνασμα με το μετασχηματισμό CSS3, βεβαιωθείτε ότι το αποτέλεσμα πέφτει ωραία σε αυτά τα προγράμματα περιήγησης.θέση ιδιοκτησία. Έχετε δύο απόλυτος. Αυτό μας επιτρέπει να το τοποθετήσουμε ελεύθερα στο δοχείο. απόλυτος θέση θα επηρεάσει το άλλο στοιχείο μέσα στο ίδιο δοχείο.2. Χρησιμοποιήστε το μετασχηματισμό CSS3
θέση ιδιοκτησίας, δεν θα επηρεάσει τη θέση άλλων στοιχείων μέσα στο ίδιο δοχείο.50% από την κορυφή και χρησιμοποιώντας μετασχηματισμό CSS δίνει μια μετάφραση του -50%. Και εκεί το έχετε.3. Χρησιμοποιήστε το Padding
υλικό παραγεμίσματος για να δημιουργήσετε μια ψευδαίσθηση της κάθετης ευθυγράμμισης. Για να το κάνετε αυτό, απλά ρυθμίστε το επάνω και το κάτω κάλυμμα εξίσου, ως εξής:αυτο.4. Χρησιμοποιήστε Ύψος Γραμμής
ύψος γραμμής ιδιοκτησία. Ρυθμίστε το ύψος γραμμής περίπου για το ίδιο ύψος με το ύψος του κιβωτίου και θα δείτε την ακόλουθη έξοδο.ύψος γραμμής, δίνοντάς μας πάρα πολλά κενά.5. Χρησιμοποιήστε τον πίνακα CSS
τραπέζι, ενώ το παιδικό στοιχείο πρέπει να εμφανίζεται ως επιτραπέζιο κύτταρο στη συνέχεια, χρησιμοποιήστε το κατακόρυφη ευθυγράμμιση ιδιότητα στο κεντρικό κείμενο κάθετο.6. Χρησιμοποιήστε το Flexbox
ευθυγράμμιση-στοιχεία: κέντρο ως εξής, και αυτό είναι.
