CSS Dersleri 25 - Hizalama Seçenekleri

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Hizlama Seçenekleri konusunu öğreneceğiz.

Etiketler Nasıl Ortalanır ?

Bir blok etiketini (div gibi) yatay olarak ortalamak için margin: auto; özelliği kullanılır.Etiketin genişliğini ayarlamak, kapsayıcının kenarlarına kadar uzanmasını önleyecektir.Etiket daha sonra belirtilen genişliği kaplar ve kalan alan iki kenar boşluğu arasında eşit olarak bölünür:

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

Not: Genişlik özelliği ayarlanmamışsa (veya% 100'e ayarlanmışsa) ortaya hizalamanın hiçbir etkisi yoktur.

Metni Ortalama Nasıl Yapılır ?

Metni bir etiketin içinde ortalamak için text-align: center; kullanılır.

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

Resim Ortalama Nasıl Yapılır ?

Bir resimi ortalamak için, sol ve sağ kenar boşluğunu otomatik olarak ayarlayın ve onu bir blok etiketi haline getirin:

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

Position Kullanarak Sağa ve Sola Hizalama

Etiketleri hizalamak için position:absolute; özelliği kullanılabilir.

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

Not: Absolute ile konumlandırılmış etiketler normal akıştan çıkarılır ve diğer etiketlerle çakışabilir.

Float Kullanarak Sağa ve Sola Hizalama

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

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

Padding Kullanarak Dikey Ortalama

CSS'de bir etiketi dikey olarak ortalamanın birçok yolu vardır. Padding kullanarak bu mümkündür ;

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

Line-height Kullanarak Dikey Ortalama

Başka bir püf nokta ise line-height özelliğini height özelliğine eşit bir değerle kullanmaktır:

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

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}