CSS align-items Özelliği

Tanım ve kullanım

align-items özelliğini, esnek konteyner içindeki öğelere varsayılan hizalama yöntemi olarak belirler.

İpucu:Her bir öğenin align-self Bu align-items özelliğini geçersiz kılmak için bu özellikleri kullanın.

Ayrıca bakınız:

CSS eğitimi:CSS Grid

CSS eğitimi:CSS Flexbox

CSS referans el kitabı:align-content özelliği

CSS referans el kitabı:align-self özelliği

CSS referans el kitabı:justify-content özelliği

CSS referans el kitabı:justify-items özelliği

CSS referans el kitabı:justify-self özelliği

HTML DOM referans el kitabı:alignItems özelliği

Örnek

Tüm esnek <div> öğelerinin ortasına hizalama yapın:

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

Kendiniz deneyin

CSS dilbilgisi

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

Özellik değeri

Değer Açıklama
stretch Varsayılan. Öğe, konteyneri sığdırmak için çekilir.
center Öğe, konteynerin ortasına yerleştirilir.
flex-start Öğe, konteynerin başına yerleştirilir.
flex-end Öğe, konteynerin sonuna yerleştirilir.
baseline Öğe, konteynerin temel çizgisine konumlandırılır.
initial Bu özelliği varsayılan değerine ayarlayın. Bakınız initial.
inherit Bu özelliği ebeveyn elementinden devralır. Bakınız inherit.

Teknik ayrıntılar

Varsayılan değer: stretch
Devralma: Hayır
Animasyon yapımı: Desteklenmiyor. Bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.alignItems="center"

Tarayıcı desteği

Tablodaki sayılar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

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