Πώς να τοποθετήσετε στοιχεία Ιστού με κάθετη ευθυγράμμιση CSS

Αναζήτηση Google









Τοπίο
Περιγραφή






Δάσος

Lorem ipsum dolor sit amet.






ωκεανός

Lorem ipsum dolor sit amet.

ο Κώδικας HTML παραπάνω δημιουργεί μια απλή ιστοσελίδα που εμφανίζει τέσσερα στοιχεία: συνδεδεμένο κείμενο, μια εικόνα, ένα ενσωματωμένο βίντεο και έναν πίνακα. Θα πρέπει να μοιάζει με αυτό στο πρόγραμμα περιήγησής σας:

Πώς να ευθυγραμμίσετε κάθετα το κείμενο

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

, και

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

Χρησιμοποιώντας την επάνω τιμή κατακόρυφης στοίχισης στο κείμενο

ένα {
 κατακόρυφη ευθυγράμμιση: επάνω;
}

Προσθέτοντας το Κωδικός CSS παραπάνω με το βασικό έγγραφο HTML θα ευθυγραμμίσει το επάνω μέρος του ετικέτα κειμένου με την κορυφή του ψηλότερου στοιχείου στη γραμμή. Παραγωγή της ακόλουθης ενημερωμένης οθόνης:

Χρήση της ποσοστιαίας τιμής στο κείμενο

ένα {
 κατακόρυφη ευθυγράμμιση: -50%;
}

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

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

Χρήση της τιμής μήκους στο κείμενο

ένα {
 κατακόρυφη στοίχιση: 90 px;
}

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

Πώς να ευθυγραμμίσετε κάθετα τις εικόνες

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

Χρήση της υπερτιμής κάθετης στοίχισης στις Εικόνες

img {
 κατακόρυφη ευθυγράμμιση: super;
}

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

Χρήση της τιμής ποσοστού κάθετης στοίχισης στις εικόνες

img {
 κατακόρυφη ευθυγράμμιση: 25%;
}

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

Χρήση της τιμής μήκους κάθετης στοίχισης στις Εικόνες

img {
 κατακόρυφη στοίχιση: 5 εικονοστοιχεία;
}

Ο παραπάνω κώδικας ευθυγραμμίζει τη γραμμή βάσης του στοιχείου εικόνας σε μια θέση 5 εικονοστοιχεία πάνω από τη γραμμή βάσης του γονικού στοιχείου. Αυτό παράγει ένα αποτέλεσμα παρόμοιο με αυτό των τιμών super και 25%:

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

Χρήση της υπερτιμής κάθετης στοίχισης σε ένα βίντεο

βίντεο {
 κατακόρυφη στοίχιση: υπο;
}

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

Χρήση της ποσοστιαίας τιμής κάθετης στοίχισης σε ένα βίντεο

βίντεο {
 κατακόρυφη ευθυγράμμιση: -25%;
}

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

Χρήση της τιμής μήκους κάθετης στοίχισης σε ένα βίντεο

βίντεο {
 κατακόρυφη στοίχιση: -5 px;
}

Ο παραπάνω κώδικας ευθυγραμμίζει τη γραμμή βάσης του στοιχείου εικόνας σε μια θέση 5 εικονοστοιχεία κάτω από τη γραμμή βάσης του γονικού στοιχείου. Αυτό παράγει ένα αποτέλεσμα όπως οι τιμές υπο και -25%:

Πώς να ευθυγραμμίσετε κάθετα στοιχεία σε έναν πίνακα

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

Χρησιμοποιώντας την επάνω τιμή κατακόρυφης στοίχισης στα δεδομένα πίνακα

td {
 ύψος: 40 px;
 κατακόρυφη ευθυγράμμιση: επάνω;
}

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

Χρησιμοποιώντας τη μεσαία τιμή κάθετης στοίχισης στα δεδομένα πίνακα

td {
 ύψος: 40 px;
 κατακόρυφη ευθυγράμμιση: μέση;
}

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

Χρησιμοποιώντας την κάτω τιμή κατακόρυφης στοίχισης στα δεδομένα πίνακα

td {
 ύψος: 40 px;
 κατακόρυφη ευθυγράμμιση: κάτω;
}

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

Τώρα μπορείτε να ευθυγραμμίσετε τα στοιχεία στην ιστοσελίδα σας

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

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

Σχετικά με τον Συγγραφέα

Kadeisha Kean (Δημοσιεύτηκαν 52 άρθρα)

Η Kadeisha Kean είναι προγραμματιστής λογισμικού Full-Stack και συγγραφέας τεχνικής/τεχνολογίας. Έχει τη διακριτή ικανότητα να απλοποιεί μερικές από τις πιο σύνθετες τεχνολογικές έννοιες. παραγωγή υλικού που μπορεί να γίνει εύκολα κατανοητό από κάθε αρχάριο της τεχνολογίας. Είναι παθιασμένη με τη συγγραφή, την ανάπτυξη ενδιαφέροντος λογισμικού και το ταξίδι στον κόσμο (μέσω ντοκιμαντέρ).

Περισσότερα από την Kadeisha Kean