CSS ile Hizalama ve Ortalama (CSS Align)

Bu yazımızda, CSS ile nasıl hizalama (align) yapılabileceğine değineceğiz.

CSS Hizalama

CSS (Cascading Style Sheets), web sayfalarını estetik açıdan şekillendirmek için kullanılır. Hizalama, CSS’nin önemli özelliklerinden biridir. İçeriklerin sayfa içerisinde nasıl konumlandırılacağını belirler. CSS hizalama işlevi özellikle, metinlerin, görsellerin ve diğer HTML elemanlarının konumunu ayarlamak için kullanılır.

Metin Hizalaması: “text-align”

text-align: Metin hizalamasını kontrol eder ve aşağıdaki değerleri alır:

• left: Metni sola yaslar.
• right: Metni sağa yaslar.
• center: Metni ortalar.
• justify: Metni iki yana yaslar, tam genişlikte hizalar.

See the Pen Untitled by 1kodum (@1kodum) on CodePen.

Yatay Ortalama: “margin”

Bir blok elementinin yatay olarak ortalanması için margin özelliği kullanılabilir. Aşağıdaki değerleri alır:

• auto: Özellikle yatay hizalamada, elemanı otomatik olarak ortalar.
• <uzunluk>: Örneğin 20px ya da 2em gibi belirli bir uzunluk değeri.
• <yüzde>: Elemanın genişliğine göre bir yüzde değeri. Örneğin 50%.

See the Pen Untitled by 1kodum (@1kodum) on CodePen.

❗ Yalnız yukarıdaki örnekte uygun bir “width”, yani “genişlik” özelliği verilmiştir. Eğer bu verilmeseydi ya da “%100” olarak ayarlansaydı yukarıdaki etki görünmeyecekti.

Resim Ortalama

Bir resmi (örneğin, <img> etiketi) yatay olarak bir konteynerin (örneğin, bir <div>) içerisinde ortalamak istiyorsanız, bu resme display: block; özelliğini ve sol ve sağ margin değerlerini auto olarak ayarlayabilirsiniz.

See the Pen Untitled by 1kodum (@1kodum) on CodePen.

Yukarıdaki kodun çalışması için konteynerin belirli bir genişliğe sahip olması ve resmin genişliğinin bu konteyner genişliğinden küçük olması gerekmektedir. Ayrıca dikey hizalamada bu kod çalışmaz.

Position Kullanarak Sağa ve Sola Hizalama

position:absolute; özelliği kullanarak elementleri hizalayabiliriz. Ancak unutmamak gerekir ki absolute ile konumlandırılmış elementler normal akıştan çıkarılır ve diğer elementlerle çakışabilir.

See the Pen Untitled by 1kodum (@1kodum) on CodePen.

“Line-height” Kullanarak Dikey Ortalama

Pekala line-height özelliğini bir elementin height değeriyle eşit yaparak, o element içindeki metni dikey olarak ortalamak mümkündür. Bu yöntem genellikle tek satır metin için geçerlidir. Özellikle, buton (button) veya tek satırlık metinlerin olduğu elementlerde kullanışlıdır.

See the Pen Untitled by 1kodum (@1kodum) on CodePen.

Flexbox Kullanarak Dikey Ortalama

CSS’de flexbox özellikleri: Esnek kutular için hizalama ve yerleştirme özelliklerini kontrol eder.

• display: Flex konteynerini tanımlar.
  • flex: Elemanı esnek bir kutu yapar.
  • inline-flex: Elemanı satır içi esnek bir kutu yapar.
• justify-content: Ana eksen boyunca elemanların nasıl hizalandığını belirler.
  • flex-start: Elemanları başlangıç noktasına yaslar.
  • flex-end: Elemanları bitiş noktasına yaslar.
  • center: Elemanları ortalar.
  • space-between: Elemanlar arasında eşit boşluk bırakır.
  • space-around: Elemanların her iki tarafında eşit boşluk bırakır.
• align-items: Çapraz eksen boyunca elemanların nasıl hizalandığını belirler.
  • flex-start: Elemanları üst kısma yaslar.
  • flex-end: Elemanları alt kısma yaslar.
  • center: Elemanları dikey olarak ortalar.
  • baseline: Elemanları temel çizgiye göre hizalar.
  • stretch: Elemanları konteynerin yüksekliğine göre gerdirir.

See the Pen Untitled by 1kodum (@1kodum) on CodePen.