Χαρακτηριστικό align-items CSS

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

align-items ιδιότητες για να καθορίσετε την προεπιλεγμένη πρακτική για τα στοιχεία ενός ελαστικού κουτιού.

Συμβουλή:Χρησιμοποιήστε την ιδιότητα κάθε στοιχείου align-self ιδιότητες για να καλύψουν αυτήν την ιδιότητα align-items.

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

Εκμάθηση CSS:CSS Grid

Εκμάθηση CSS:CSS Flexbox

Εγχειρίδιο CSSΙδιότητα align-content

Εγχειρίδιο CSSΙδιότητα align-self

Εγχειρίδιο CSSΙδιότητα justify-content

Εγχειρίδιο CSSΙδιότητα justify-items

Εγχειρίδιο CSSΙδιότητα justify-self

Εγχειρίδιο HTML DOMΙδιότητα alignItems

Παράδειγμα

Κεντράρετε όλες τις ενότητες του ελαστικού στοιχείου <div>:

div {
  display: flex;
  align-items: center;
}

Προσπαθήστε να το δοκιμάσετε προσωπικά

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

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

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

Τιμή Περιγραφή
stretch Προεπιλεγμένο. Το στοιχείο επεκτείνεται για να ταιριάζει στο κουτί.
center Το στοιχείο βρίσκεται στο κέντρο του κουτιού.
flex-start Το στοιχείο βρίσκεται στην αρχή του κουτιού.
flex-end Το στοιχείο βρίσκεται στο τέλος του κουτιού.
baseline Το στοιχείο τοποθετείται στη βάση του κουτιού.
initial Δημιουργήστε αυτήν την ιδιότητα στην προεπιλεγμένη της τιμή. Δείτε επίσης: initial.
inherit Κληρονομείται από το γονικό στοιχείο. Δείτε επίσης: inherit.

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

Προεπιλεγμένη τιμή: stretch
Κληρονομικότητα: Όχι
Δημιουργία αニμασίας: Δεν υποστηρίζεται. Δείτε επίσης:Ιδιότητες της αニμασίας.
Έκδοση: CSS3
Γλώσσα γραφής JavaScript: object.style.alignItems="center"

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0