Örnek
Esnek tüm öğeler için hizalamalarını ortalayın <div> elemanı:
div
{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
Kendin dene " Tanımı ve Kullanımı
hizalama-ürün özelliği esnek kap içindeki öğeler için varsayılan hizalamasını belirtir.
Tip: hizalamak-ürün özelliğini geçersiz kılmak için her öğenin hizalama-öz özelliğini kullanın.
Varsayılan değer: | stretch |
---|---|
Miras: | no |
canlandırılabilir: | no. Read about animatable |
Versiyon: | CSS3 |
JavaScript sözdizimi: | object .style.alignItems="center" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
-webkit- ardından Numaraları önek ile çalıştı ilk sürümü belirtin.
özellik | |||||
---|---|---|---|---|---|
align-items | 21,0 | 11.0 | 20.0 | 9.0 7.0 -webkit- | 12.1 |
CSS sözdizimi
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
Mülkiyet Değerler
değer | Açıklama | Oynat |
---|---|---|
stretch | Varsayılan. Öğeler kabı sığacak şekilde uzatılır | Oynat " |
center | Ürünler, kabın merkezinde konumlandırılmış | Oynat " |
flex-start | Öğeler kabın başında konumlandırılmış | Oynat " |
flex-end | Ürünler, kabın ucunda konumlandırılmış | Oynat " |
baseline | Ürünler, kabın taban çizgisinde konumlandırılır | Oynat " |
initial | varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun | Oynat " |
inherit | üst öğesinden bu özelliği devralır. Yaklaşık miras oku |
İlgili Sayfalar
CSS Referansı: align-content property
CSS Referans: align-self property
HTML DOM referansı: alignItems property