Contoh
Pusat keberpihakan untuk semua item dari fleksibel <div> elemen:
div
{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
Cobalah sendiri " Definisi dan Penggunaan
Align-item properti menentukan keselarasan default untuk item dalam wadah fleksibel.
Tip: Gunakan properti menyelaraskan diri dari setiap item untuk menimpa properti menyelaraskan-item.
| nilai default: | stretch |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.alignItems="center" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| align-items | 21.0 | 11.0 | 20.0 | 9.0 7.0 -webkit- | 12.1 |
CSS Syntax
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| stretch | Default. Produk yang ditarik agar sesuai wadah | Mainkan " |
| center | Produk yang diposisikan di tengah wadah | Mainkan " |
| flex-start | Produk yang diposisikan pada awal wadah | Mainkan " |
| flex-end | Produk yang diposisikan pada akhir wadah | Mainkan " |
| baseline | Produk yang diposisikan di dasar wadah | Mainkan " |
| initial | Set properti ini ke nilai default. Baca tentang awal | Mainkan " |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Pages terkait
CSS Referensi: align-content property
CSS Referensi: align-self property
Referensi HTML DOM: alignItems property