Blok ve tablo düzenlerinde içeriği hizalama desteği

Rachel Andrew

Chrome 123'ten itibaren, blok ve tablo düzenlerinde CSS Kutu Hizalaması'ndaki align-content özelliğini kullanabilirsiniz. Bu sayede, esnek veya ızgara düzeni oluşturmak zorunda kalmadan blok yönünü hizalayabilirsiniz. Ancak align-content'ü bu sayfa düzeni yöntemlerinin dışında kullandıysanız artık geçerli olacağından CSS'nizi güncellemeniz gerekebilir.

Browser Support

• 123
• 123
• 125
• 17.4

Esnek ve ızgara düzenlerinde align-content

Flex öğelerini veya ızgara kanallarını hizalamak için muhtemelen align-content'ü kullanmışsınızdır. Flex düzeninde, flex öğelerin çapraz eksende hizalanması için flex kapsayıcıda align-content mülkü kullanılır. Aşağıdaki örnekte space-between değerine sahip olduğundan esnek kapsayıcıdaki kullanılabilir alanı esnek satırlar arasında dağıtır.

align-content mülkünün, flex kapsayıcının çapraz eksende boş alanı olması nedeniyle flex öğelerinin satırlarını aralıklı hale getirdiği görülüyor.

Bir öğeyi dikey olarak ortala

align-content özellikle bir öğeyi kapsayıcı içinde dikey olarak merkezlemek için yararlıdır. Bunu yapmak için align-content: center ile birlikte display: flex kullanın. Bu işlem, öğenin bir flex öğesi haline gelmesine neden olur ve diğer varsayılan flex öğesi davranışları da geçerli olur. Aşağıdaki örnekte başlık, align-content: center ile dikey olarak ortalanmıştır. Bu, öğenin içeriğe sığacak şekilde küçülmesine neden olur. Bu nedenle öğeye flex-grow: 1 uygulamanız gerekir.

align-content özelliği, başlığı bir flex kapsayıcıda dikey olarak merkezler.

Blok düzeni için align-content'ü kullanabildiğinizde, mülkün çalışması için esnek bir düzen oluşturmanıza gerek kalmadan dikey hizalama elde edebilirsiniz. Öğe blok öğesi olarak kaldığından ek özellik eklemeniz gerekmez. Tek değişiklik, hizalamayla ilgilidir.

align-content mülk, başlığı bir blok kapsayıcı içinde dikey olarak merkezler (Chrome 123 veya Safari 17.4 veya sonraki sürümler gerekir).

Blok düzenlerinde align-content desteğini test etme

Maalesef blok düzeninde align-content desteğini test etmek mümkün değildir. align-content, esnek ve ızgara düzeninde uzun süredir desteklendiğinden, @supports ile özellik sorguları kullanmak her zaman doğru değerini döndürür. Bu durum, flexbox'taki gap mülküyle aynıdır. CSS Çalışma Grubu, bunun gibi kısmi uygulamalar için bir çözümü araştırıyor.

Sitelerinizin beklenmedik bir şekilde hizalanıp hizalanmadığını kontrol edin

align-content mülkü, blok düzenleriyle çalışmak üzere özellikte uzun yıllardır tanımlanmıştır. Hiçbir tarayıcı bu bağlamların dışında align-content'ü desteklemediği için hiçbir şey yapmadı. Ancak mülkü, flex veya grid kapsayıcı olmayan bir öğeye eklediyseniz bu özellik Chrome 123'ten itibaren geçerli olmaya başlayacaktır. CSS'nizde align-content kullanımı olup olmadığını arayın ve bu durum sizin için geçerliyse sitelerinizi ve uygulamalarınızı test etmek üzere beta sürümünü kullanın.