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;
}

 

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla
  • C# Dersleri

    C# Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 100 Ders
    Dil Türkçe
    Güncelleme 04/2024
    Derse Başla