Ένα κείμενο μπορεί εύκολα να προστεθεί οπουδήποτε, αλλά χωρίς ευθυγράμμιση, μπορεί να φαίνεται απαράμιλλο και λιγότερο ελκυστικό. Το μη στοιχισμένο κείμενο μπορεί επίσης να διαταράξει ολόκληρη την εμφάνιση μιας ιστοσελίδας. Για να αντιμετωπίσουμε τέτοια πράγματα σε εφαρμογές web, μπορούμε να χρησιμοποιήσουμε ορισμένες χρήσιμες ιδιότητες του CSS που θα σας βοηθήσουν να ευθυγραμμίσετε τα κείμενα σε ελάχιστο χρόνο.
Αυτό το άρθρο θα δείξει πώς να ευθυγραμμίσετε το κείμενο κάθετα στο CSS.
Πώς να στοιχίσετε το κείμενο κάθετα στο CSS;
Στο CSS, μπορείτε να χρησιμοποιήσετε τις παρακάτω ιδιότητες για να ευθυγραμμίσετε το κείμενο κάθετα:
-
- ιδιότητα γραμμής ύψους
- ιδιότητες εμφάνισης και ευθυγράμμισης στοιχείων
Τώρα, ας δούμε κάθε μέθοδο μία προς μία!
Μέθοδος 1: Χρήση ιδιότητας line-height για κατακόρυφη στοίχιση κειμένου σε CSS
Ο ' ύψος γραμμής Η ιδιότητα ” προσδιορίζει την περιοχή κάτω και προς τα πάνω ενσωματωμένα στοιχεία. Ορίζει την απόσταση ενός κειμένου από άλλα στοιχεία. Χρησιμοποιώντας την ιδιότητα line-height, το κείμενο μπορεί εύκολα να ευθυγραμμιστεί κατακόρυφα στη μέση.
Παράδειγμα
Εδώ είναι ένα κείμενο μέσα σε ένα πλαίσιο (περίγραμμα) που βρίσκεται αυτήν τη στιγμή στην επάνω αριστερή πλευρά. Ας ευθυγραμμίσουμε αυτό το κείμενο στο κέντρο κάθετα και οριζόντια:
Τώρα ας προχωρήσουμε στην επόμενη μέθοδο. ' Flexbox ” είναι μια μονοδιάστατη διάταξη που σας επιτρέπει να μορφοποιήσετε HTML. Μπορείτε επίσης να το χρησιμοποιήσετε για να ευθυγραμμίσετε στοιχεία κάθετα ή οριζόντια. Λοιπόν, ας πάρουμε ένα παράδειγμα και ας ευθυγραμμίσουμε ένα κείμενο κάθετα με τη βοήθεια του flexbox. Παράδειγμα Πρώτα απ 'όλα, θα κάνουμε το κοντέινερ μας ευέλικτο ορίζοντας την τιμή του ' απεικόνιση 'περιουσία ως ' καλώδιο '. Στη συνέχεια, χρησιμοποιήστε το ' στοίχιση-στοιχεία ” ιδιότητα για κάθετη ρύθμιση του περιεχομένου στο κέντρο. Επιπλέον, για να ευθυγραμμίσετε το περιεχόμενο στο κέντρο οριζόντια, το ' δικαιολογώ-περιεχόμενο » το ακίνητο θα χρησιμοποιηθεί: Στο CSS, το κείμενο μπορεί εύκολα να ευθυγραμμιστεί κάθετα με τη βοήθεια του ' ύψος γραμμής ” ιδιοκτησία. Μπορείτε επίσης να χρησιμοποιήσετε το ' flexbox ' για την κατακόρυφη στοίχιση του κειμένου με ' απεικόνιση ' και ' στοίχιση-στοιχεία ' ιδιότητες. Το Flexbox είναι μια μονοδιάστατη διάταξη και χρησιμοποιείται απλώς για την κατακόρυφη ή οριζόντια στοίχιση των αντικειμένων. Αυτή η ανάρτηση προσφέρει δύο πιο εύκολες μεθόδους που μπορούν να σας βοηθήσουν να ευθυγραμμίσετε το κείμενο κάθετα στο CSS.
Για να το κάνετε αυτό, προσθέστε ένα δοχείο '
Καλύτερος εκπαιδευτικός ιστότοπος !
div >
Το κουτί σχηματίζεται χρησιμοποιώντας ένα ' 3 εικονοστοιχεία «σύνορα και» 250 px ' ύψος. Ο ' μέγεθος γραμματοσειράς 'η ιδιότητα χρησιμοποιείται με την τιμή ' 24 εικονοστοιχεία ” για να γίνει ορατή η γραμματοσειρά. Θα εκχωρήσουμε div ένα ' ύψος γραμμής 'του ' 250 px ” για ευθυγράμμιση του κειμένου του κάθετα στη μέση. Στη συνέχεια, θα χρησιμοποιήσουμε το ' στοίχιση κειμένου ιδιότητα για να ευθυγραμμίσετε το κείμενο στο κέντρο:
Ύψος γραμμής: 250 px;
text-align: κέντρο;
μέγεθος γραμματοσειράς: 24 px;
ύψος: 250 px;
περίγραμμα: 3px στερεό;
}
Όπως μπορείτε να δείτε, το κείμενο έχει ευθυγραμμιστεί κατακόρυφα στο κέντρο χρησιμοποιώντας το ύψος γραμμής και οριζόντια στο κέντρο με την ιδιότητα στοίχιση κειμένου. Μέθοδος 2: Χρήση ιδιοτήτων εμφάνισης και στοίχισης στοιχείων για κάθετη στοίχιση κειμένου σε CSS
απεικόνιση: καλώδιο ;
στοίχιση-στοιχεία: κέντρο;
justify-content: κέντρο;
μέγεθος γραμματοσειράς: 24 px;
ύψος: 200 px;
περίγραμμα: 3px στερεό;
}
Το καθορισμένο κείμενο έχει ευθυγραμμιστεί με επιτυχία στο κέντρο:
Παρέχουμε μεθόδους που σχετίζονται με την κάθετη στοίχιση κειμένου σε CSS. συμπέρασμα