CSS Hizalama (Alignment)

CSS hizalama, web tasarımında öğeleri doğru bir şekilde yerleştirmek ve düzenlemek için kullanılan temel bir tekniktir. Özellikle metin, resim, blok öğeler veya içerikler arasındaki boşlukların doğru şekilde ayarlanması gereklidir. Hizalama, sayfa tasarımında öğelerin estetik görünümünü ve okunabilirliğini büyük ölçüde etkiler. CSS’de hizalama yapmak için birden çok yöntem bulunmaktadır, her biri farklı öğe türleri ve kullanım senaryoları için uygundur.

1. Metin Hizalama (Text Alignment)

Metin hizalama, genellikle metin öğelerinin yatay olarak hizalanmasını ifade eder. Bu işlem, text-align özelliği ile yapılır.

Özellik:

• left: Metni sola hizalar.
• right: Metni sağa hizalar.
• center: Metni ortaya hizalar.
• justify: Metni, satır sonlarına kadar uzatarak her iki kenara hizalar.

Örnek:

p {
  text-align: center;
}

Bu örnekte, paragraf metni yatayda merkeze hizalanır.

2. Blok Öğeleri (Block Elements) Hizalama

Blok öğelerini hizalamak için margin özelliği kullanılabilir. Genellikle auto değeri, öğeleri yatayda ortalamak için kullanılır.

Örnek:

div {
  width: 50%;
  margin: 0 auto;
}

Bu örnekte, div öğesi sayfanın ortasına hizalanacaktır.

Açıklama:

• margin: 0 auto; ifadesi, öğeyi hem sağa hem de sola eşit boşluk bırakacak şekilde ortalar.
• width özelliği öğenin genişliğini belirtir ve bu genişlik üzerinden hizalama yapılır.

3. Flexbox ile Hizalama

CSS Flexbox, öğeleri daha esnek bir şekilde hizalamak için kullanılan güçlü bir araçtır. Flexbox kullanarak, öğeleri hem yatay hem de dikey olarak kolayca hizalayabilirsiniz. Flexbox, özellikle responsif tasarımlarda oldukça kullanışlıdır.

Özellikler:

• justify-content: Yatay hizalama için kullanılır.
• align-items: Dikey hizalama için kullanılır.
• align-self: Tek bir öğenin dikey hizalamasını ayarlamak için kullanılır.

Örnek:

.container {
  display: flex;
  justify-content: center; /* Yatayda ortalama */
  align-items: center;     /* Dikeyde ortalama */
  height: 100vh;           /* Yükseklik tüm görünüm alanını kapsar */
}

Bu örnekte, .container öğesindeki tüm elemanlar hem yatayda hem de dikeyde merkeze hizalanır. 100vh (viewport height) ifadesi, öğenin yüksekliğini ekranın yüksekliği kadar yapar.

4. Grid ile Hizalama

CSS Grid, öğeleri hem satırlarda hem de sütunlarda düzenlemeyi sağlayan bir tekniktir. Grid ile hizalama yaparken hem justify-items (yatayda) hem de align-items (dikeyde) özellikleri kullanılır.

Örnek:

.container {
  display: grid;
  justify-items: center; /* Yatayda ortalama */
  align-items: center;   /* Dikeyde ortalama */
  height: 100vh;
}

Grid kullanarak öğeleri yatay ve dikey olarak ortalamak için aynı şekilde justify-items ve align-items kullanabilirsiniz.

5. Dikey Hizalama (Vertical Alignment)

Dikey hizalama yapmak, özellikle satır içi öğelerle (inline) çalışırken önemlidir. vertical-align özelliği, öğeleri dikeyde hizalamak için kullanılır.

Özellikler:

• top: Üst kısımdan hizalar.
• middle: Ortaya hizalar.
• bottom: Alt kısımdan hizalar.

Örnek:

span {
  vertical-align: middle;
}

Bu örnekte, span öğesi dikeyde orta hizalanır.

Not: vertical-align özelliği yalnızca satır içi öğeler için geçerlidir.

6. Daha Karmaşık Hizalama Senaryoları

Hizalama genellikle birkaç özellik bir arada kullanılarak yapılır. Örneğin, bir öğe hem içerik içinde hem de sayfa içinde ortalanabilir.

Örnek (Flexbox + Margin):

.container {
  display: flex;
  justify-content: center; /* Yatayda ortalama */
  align-items: center;     /* Dikeyde ortalama */
  height: 100vh;
}

.box {
  width: 200px;
  height: 200px;
  margin: auto;
  background-color: lightblue;
}

Bu örnekte, .box öğesi .container öğesinin içinde hem yatayda hem de dikeyde ortalanır.

7. İçerik ve Öğeler Arası Boşlukların Ayarlanması

Hizalama sadece öğelerin konumlarını değil, aynı zamanda öğeler arasındaki boşlukları da içerir. Bu boşluklar margin ve padding ile ayarlanabilir.

Örnek:

div {
  margin: 20px;
  padding: 15px;
}

• margin: Dış boşlukları (diğer öğelerle arasındaki boşluk) ayarlar.
• padding: İç boşlukları (içeriğin kenarlarla arasındaki boşluk) ayarlar.

8. Yatayda ve Dikeyde Tam Ortalamayı Başarmak

Yatayda ve dikeyde tam ortalama yapmak için Flexbox ve Grid tekniklerini birlikte kullanabiliriz. Bu genellikle bir öğeyi sayfanın tam ortasına yerleştirmek için gereklidir.

Örnek (Flexbox ile tam ortalama):

.container {
  display: flex;
  justify-content: center; /* Yatayda ortalama */
  align-items: center;     /* Dikeyde ortalama */
  height: 100vh;
}