Atribut align-items CSS

Definisi dan penggunaan

align-items Properti ini menentukan cara default pengaligaturan item di dalam kontainer elastis.

Panduan:Gunakan properti setiap item align-self properti untuk menimpa properti align-items ini.

Lihat juga:

Panduan CSS:CSS Grid

Panduan CSS:Flexbox CSS

Panduan CSS:Properti alignContent

Panduan CSS:Properti alignSelf

Panduan CSS:Properti justifyContent

Panduan CSS:Properti justifyItems

Panduan CSS:Properti justifySelf

Panduan HTML DOM:Properti alignItems

Contoh

Menaruh semua item di dalam elemen <div> elastis di tengah:

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

Coba sendiri

Syntaxa CSS

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

Nilai properti

Nilai Deskripsi
stretch Default. Item dijelaskan untuk memadai kontainer.
center Item berada di tengah kontainer.
flex-start Item berada di awal kontainer.
flex-end Item berada di ujung kontainer.
baseline Item ditempatkan di garis dasar kontainer.
initial Setel properti ini ke nilai default. Lihat: initial.
inherit Mengambil properti ini dari elemen orangtua. Lihat: inherit.

Detil teknis

Nilai default: stretch
Turunan: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Properti animasi.
Versi: CSS3
Syntaxa JavaScript: object.style.alignItems="center"

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung properti ini.

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