Αυτό το άρθρο δείχνει πώς μπορείτε να στοιχίσετε κάθετα κείμενο μέσα σε ένα flexbox:
Μέθοδος 1: Χρήση της ιδιότητας 'align-item'.
Για κάθετη στοίχιση κειμένου, οι χρήστες μπορούν να χρησιμοποιήσουν το ' στοίχιση-αντικείμενο ” ιδιοκτησία που παρέχεται από την CSS. Βοηθά τα στοιχεία να ορίσουν την ευθυγράμμισή τους μέσα στο flexbox. Οι πιθανές θέσεις κάθετης ευθυγράμμισης μπορούν να είναι στο ' μπλουζα ' Μέσης ', ή ' κάτω μέρος » πλευρά.
Οι πρακτικές επιδείξεις για την ευθυγράμμιση στοιχείων προς αυτές τις κατευθύνσεις αναφέρονται παρακάτω:
Παράδειγμα 1: Κορυφαία θέση
Για να ευθυγραμμίσετε το κείμενο μέσα στο flexbox στην επάνω θέση, το ' flex-start 'Η τιμή παρέχεται στο ' στοίχιση-στοιχεία ” ιδιοκτησία. Αυτή η ιδιότητα εκχωρείται στο main div που θα εμφανίζεται ως flex. Ας υποθέσουμε ότι το div με μια κατηγορία ' κατακόρυφος ” δημιουργείται στο αρχείο HTML. Στη συνέχεια, στο αρχείο CSS, επιλέξτε αυτήν την κλάση και εκχωρήστε τις ακόλουθες ιδιότητες:
.κατακόρυφος {
χρώμα : άσπρο ;
ύψος : 150 εικονοστοιχεία ;
απεικόνιση : καλώδιο ;
padding-αριστερά : 20 εικονοστοιχεία ;
στοίχιση-στοιχεία : flex-start ;
χρώμα του φόντου : πράσινο του δάσους ;
}
- Πρώτον, το βασικό στυλ και η ευθυγράμμιση δίνονται στο div χρησιμοποιώντας τις ιδιότητες χρώματος, χρώματος φόντου και ύψους του CSS.
- Η ιδιότητα 'display' έχει επίσης ρυθμιστεί σε 'flex' για να γίνει flexbox.
- Τέλος, για να εμφανίσετε το κείμενο στην αρχή του flexbox, ορίστε την ιδιότητα 'align-items' σε 'flex-start.
Μετά την εκτέλεση του παραπάνω κώδικα, η ιστοσελίδα μοιάζει με αυτό:
Η έξοδος δείχνει ότι το κείμενο είναι τώρα στοιχισμένο στην επάνω θέση μέσα στο flexbox.
Παράδειγμα 2: Μέση θέση
Για να ευθυγραμμίσετε κάθετα το κείμενο στη μεσαία θέση, ορίστε το ' κέντρο 'τιμή στο CSS' στοίχιση-στοιχεία ” ιδιοκτησία:
.κατακόρυφος {χρώμα : άσπρο ;
ύψος : 150 εικονοστοιχεία ;
απεικόνιση : καλώδιο ;
padding-αριστερά : 20 εικονοστοιχεία ;
στοίχιση-στοιχεία : κέντρο ;
χρώμα του φόντου : πράσινο του δάσους ;
}
Μετά την εκτέλεση του παραπάνω κώδικα:
Η παραπάνω έξοδος δείχνει ότι το κείμενο είναι πλέον ευθυγραμμισμένο στο κέντρο του flexbox.
Παράδειγμα 3: Κάτω θέση
Για να ορίσετε το κείμενο στο κάτω μέρος του flexbox, αντιστοιχίστε το ' flex-end 'τιμή στο ' στοίχιση-στοιχεία ” ιδιοκτησία. Αυτή τη φορά το κείμενο ευθυγραμμίζεται στη θέση όπου τελειώνει το flexbox σημαίνει στην κάτω πλευρά:
.κατακόρυφος {χρώμα : άσπρο ;
ύψος : 150 εικονοστοιχεία ;
απεικόνιση : καλώδιο ;
padding-αριστερά : 20 εικονοστοιχεία ;
στοίχιση-στοιχεία : flex-end ;
χρώμα του φόντου : πράσινο του δάσους ;
}
Μετά την εκτέλεση του παραπάνω κώδικα, η ιστοσελίδα μοιάζει με αυτό:
Η παραπάνω έξοδος δείχνει ότι το κείμενο είναι πλέον κάθετα ευθυγραμμισμένο στην κάτω θέση.
Μέθοδος 2: Χρήση ιδιότητας «justify-content».
Ο ' δικαιολογώ-περιεχόμενο Η ιδιότητα ” μπορεί επίσης να χρησιμοποιηθεί για την κάθετη στοίχιση του κειμένου μέσα στο flexbox. Ωστόσο, λειτουργεί το ίδιο με το ' στοίχιση κειμένου ιδιότητα ” και ευθυγραμμίζει στοιχεία στην κατεύθυνση της γραμμής. Έτσι, για να αλλάξετε την κατεύθυνση ευθυγράμμισης, το ' flex-direction 'η ιδιότητα χρησιμοποιείται για τον καθορισμό του ' δικαιολογώ-περιεχόμενο 'ευθυγράμμιση προς' στήλη ' κατεύθυνση:
.κατακόρυφος {ύψος : 150 εικονοστοιχεία ;
απεικόνιση : καλώδιο ;
padding-αριστερά : 20 εικονοστοιχεία ;
χρώμα : άσπρο ;
χρώμα του φόντου : μελαχρινός ;
flex-direction : στήλη ;
δικαιολογώ-περιεχόμενο : flex-end ;
}
Η επεξήγηση του παραπάνω κώδικα παρέχεται παρακάτω:
- Ο ' ύψος », « χρώμα ' και ' padding-αριστερά Οι ιδιότητες λειτουργούν ακριβώς όπως η παραπάνω μέθοδος.
- Μετά από αυτό, ορίστε το ' στήλη 'τιμή στο ' flex-direction ” του flexbox για εφαρμογή στυλ μέσω στηλών.
- Μετά από αυτό, το « δικαιολογώ-περιεχόμενο Η ιδιότητα ' ευθυγραμμίζει το κείμενο κατακόρυφα.
- Στο τέλος, το « flex-end 'Η τιμή ευθυγραμμίζει το στοιχείο στο ' κάτω μέρος » πλευρά.
Σημείωση : Οι χρήστες μπορούν επίσης να ορίσουν ' flex-start ' και ' κέντρο 'αξίες στο ' μπλουζα ', και ' Μέσης » πλευρές, αντίστοιχα.
Για παράδειγμα, μετά την εκτέλεση του παραπάνω κώδικα, η ιστοσελίδα μοιάζει με αυτό:
Η παραπάνω έξοδος δείχνει ότι το κείμενο είναι στοιχισμένο στο κάτω μέρος του flexbox.
συμπέρασμα
Για να ευθυγραμμίσετε κάθετα το κείμενο μέσα σε ένα flexbox, το ' στοίχιση-στοιχεία ' και ' δικαιολογώ-περιεχόμενο Οι ιδιότητες CSS μπορούν να χρησιμοποιηθούν. Και οι δύο αυτές ιδιότητες παίρνουν ' flex-start », « κέντρο ' ή ' flex-end ' τιμές για την ευθυγράμμιση του κειμένου σε ' μπλουζα », « Μέσης ' και ' κάτω μέρος ” οδηγίες εντός του flexbox, αντίστοιχα. Αυτό το άρθρο έχει δείξει την κατακόρυφη στοίχιση του κειμένου σε ένα flexbox.