CSS Hizalama (Align)

Eleman Ortalama

Bir blok öğesini yatay olarak ortalamak için margin: auto; özelliğini kullanırız.

Elemanın genişliğini ayarlamak, alanının kenarlarına kadar uzamasını engellemek için de bu yapıyı kullanırız.

Bu yapı kullanıldıktan sonra, öğe daha sonra belirtilen genişliği kaplayacak ve kalan boşluk iki kenar boşluğu arasında eşit olarak bölünecektir.

Örnek:

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Not: Genişlik özelliği ayarlanmadıysa (veya %100'e ayarlanmadıysa) ortaya hizalamanın hiçbir etkisi olmayacaktır.

Metin Ortalama

Metni bir öğenin içinde ortalamak için text-align: center; özelliğini kullanırız.

Örnek:

.center {
  text-align: center;
  border: 3px solid green;
}

Resim Ortalama

Bir resmi ortalamak için sol ve sağ kenar boşluğunu otomatik olarak ayarlayıp onu bir blok öğesi haline getirmelisiniz.

Örnek:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Position Kullanarak Sola ve Sağa Hizala

Öğeleri hizalamanın için kullanılan yöntemlerden biri position: absolute; özelliğini kullanmaktır.

Örnek:

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Float Kullanarak Sola ve Sağa Hizala

Elemanları hizalamanın başka bir yöntemi de float özelliğini kullanmaktır.

Örnek:

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Clearfix Kullanımı

Bir eleman, içinde bulunduğu elemandan daha uzunsa, alanın dışına taşacaktır. Bunu düzeltmek için "clearfix" özelliğini kullanabilirsiniz.

Örnek:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Padding Kullanarak Dikey Ortalama

Bir öğeyi CSS'de dikey olarak ortalamanın birçok yolu vardır. Bu yollardan en basitlerinden birisi padding kullanarak dikey ortalama yapmaktır.

Örnek:

.center {
  padding: 70px 0;
  border: 3px solid green;
}

Hem dikey hem de yatay olarak ortalamak için padding ve text-align: center; özelliklerini birlikte kullanabilirsiniz.

Örnek:

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Satır Yüksekliği (line-height) Kullanarak Dikey Ortalama

Başka bir kullanım ise, line-height özelliğini, height özelliğine eşit bir değerle kullanmaktır.

Örnek:

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/*Metinde birden fazla satır varsa, aşağıdakileri şekilde bir kullanım yapmalısınız.*/
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Position ve Transform Kullanarak Dikey Ortalama

Başka bir kullanım ise, position ve transform özelliğini kullanmaktır.

Örnek:

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flexbox Kullanarak Dikey Ortalama

Bir şeyleri ortalamak için flexbox'ı da kullanabilirsiniz.

Örnek:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}