CSS lh birimi çok satırlı listelerde ikon hizalama sorununu çözüyor
Öne çıkanlar
- Flexbox ile dikey ortalama, metin birden çok satıra yayıldığında ikon hizasını bozuyor.
- Sabit piksel kaydırmaları farklı yazı tipi ve ikon boyutlarında yetersiz kalıyor.
- calc((1lh - var(--size)) / 2) formülü ikonu metnin ilk satırıyla otomatik eşitliyor.
- Sözde öğelerde aspect-ratio ve flex-shrink kuralları biçim bozulmalarını önlüyor.
Web tasarımında yaygın olarak kullanılan ikonlu liste bileşenlerinde, metin birden fazla satıra taştığında ikonun ortada kalması görsel uyumsuzluk yaratıyor. Standart Flexbox kurallarıyla ikon tepeye hizalandığında ise yazı tipinin satır yüksekliğinden kaynaklanan boşluklar nedeniyle simge ilk satırın tam karşısına oturmuyor. Yayımlanan teknik rehber, hem HTML etiketleri hem de sözde öğeler kullanılarak eklenen ikonların ilk satırla dinamik biçimde nasıl hizalanacağını ayrıntılandırıyor.
Sabit piksel değerleriyle yapılan kaydırmalar yazı tipi boyutu, simge ebadı veya liste genişliği değiştiğinde yetersiz kalıyor. Bu engeli aşmak için satır yüksekliğini doğrudan temsil eden göreceli CSS lh birimi temel alınıyor. Geliştirilen yöntemde, simge boyutunun satır yüksekliğinden çıkarılması ve ikiye bölünmesi esasına dayanan calc((1lh - var(--size)) / 2) formülü translateY fonksiyonuna uygulanarak simgenin ilk satırla kusursuz hizalanması sağlanıyor.
Sözde öğe olarak eklenen arka plan görsellerinde ise küçülme ve oran bozulması gibi ilave sorunlar ortaya çıkıyor. Yöntem, bu senaryoda flex-shrink: 0, aspect-ratio: 1 ve otomatik yükseklik kurallarını aynı kaydırma formülüyle birleştiriyor. Böylece tasarım sistemlerinde metin boyutu veya kapsayıcı genişliği değişse bile ikonlar esnekliğini koruyor.
Bu özet yapay zekâ ile hazırlanmıştır; ayrıntılar ve doğrulama için orijinal kaynağa başvurun.