Η ιδιότητα vertical-align του CSS

Ορισμός και χρήση

Η ιδιότητα vertical-align ρυθμίζει τον τρόπο που το στοιχείο τοποθετείται οριζόντια.

Σημείωση

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

Δείτε επίσης:

Εκμάθηση CSSΤο κείμενο του CSS

Εγχειρίδιο HTML DOMΗ ιδιότητα verticalAlign

Παράδειγμα

Οριζόντια τοποθέτηση μιας εικόνας:

img
  {
  vertical-align:text-top;
  }

Δοκιμάστε το προσωπικά

Γλώσσα γραφής CSS

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

Τιμή της ιδιότητας

Τιμή Περιγραφή
baseline Προεπιλεγμένο. Το στοιχείο τοποθετείται στη γραμμή της βάσης του γονικού στοιχείου.
sub Οριζόντια τοποθέτηση του κειμένου του sub.
super Οριζόντια τοποθέτηση του κειμένου του super.
top Ρυθμίζει την κορυφή του στοιχείου να ταιριάζει με την κορυφή του υψηλότερου στοιχείου στη γραμμή.
text-top Ρυθμίζει την κορυφή του στοιχείου να ταιριάζει με την κορυφή του κειμένου του γονικού στοιχείου.
middle Τοποθετεί το στοιχείο στο κέντρο του γονικού στοιχείου.
bottom Ρυθμίζει την κορυφή του στοιχείου να ταιριάζει με την κορυφή του χαμηλότερου στοιχείου στη γραμμή.
text-bottom Ρυθμίζει την κάτω γωνία του στοιχείου να ταιριάζει με την κάτω γωνία του κειμένου του γονικού στοιχείου.
length 　
% Χρησιμοποιείται το ποσοστό της τιμής του χαρακτήρα line-height για να τοποθετήσει αυτό το στοιχείο. Επιτρέπεται η χρήση αρνητικών τιμών.
inherit Καθορίζει ότι η τιμή της ιδιότητας vertical-align πρέπει να κληρονομείται από το γονικό στοιχείο.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: baseline
Προσδοκίες κληρονομικότητας: όχι
Έκδοση: CSS1
Γλώσσα γραφής JavaScript: object.style.verticalAlign="bottom"

Περισσότερες παραδείξεις

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

Υποστήριξη του προγράμματος περιήγησης

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

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 4.0