CSS ile Yatay ve Dikey Hizalama

CSS kullanarak bir nesneyi dikey ve yatay olarak ortalamanın birkaç temel yolu vardır, ancak doğru olanı seçmekte zorluk olabilir. Bunlardan bazılarını ele alacağız.

Öğeleri CSS ile dikey ve yatay olarak ortalamak geliştiriciler için zorluk teşkil eden bir sorundur. Ancak, bunu çözmek için oldukça basit olan birkaç yöntem vardır. Bu ders içeriğin dikey ve yatay olarak ortalanması için çeşitli seçenekler sunar.

Metin hizalama

---

Metni bir öğenin içine ortalamak için şu kodu kullanın: text-align: center

h1 {
    text-align: center;
}
p {
    text-align: left;
}

CSS:

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

HTML:

<div class="center">
<p>Bu metin ortalanmıştır.</p>
</div>

ÇIKTI:

Margin Özelliğini Kullanarak Merkez Hizalama

---

Blok düzeyinde bir öğenin merkez hizalaması , CSS margin:auto özelliğinin en önemli sonuçlarından biridir . Örneğin, <div> kutu sol ve sağ kenar boşlukları ayarlanarak yatay olarak ortalanabilir.

CSS:

.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}

HTML:

<div class="center">
  <p>Bu div kutusu yatay olarak ortalanmıştır.</p>
</div>

ÇIKTI:

Bir Resmi Ortalayın

---

Resmi ortalamak için iki yol vardır.

Metni ortalamada kullandığımız text-align: center kodu kullanabiliriz Resimlerin Display özelliğini display:inline-block ile değiştirin ve style özelliği text-align: center olan bir div öğesi ile sararız.

CSS:

img {
  display: inline-block;
  width:40%
}

HTML:

<div style="text-align: center">
<img src="istanbul.jpg"> 
</div> 

ÇIKTI:

İkinci yöntem resmi ortalamak için sol ve sağ kenar boşluğunu auto olarak ayarlayın ve resmi bir block öğeye dönüştürün.

CSS:

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

HTML:

<img src="istanbul.jpg">

ÇIKTI:

Position özelliğini kullanarak elemanları hizalama

---

Elemanları hizalamak için position: absolute Özelliği kullanmaktır:

CSS:

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

HTML:

<div class="right">
  <p>Dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
</div>

ÇIKTI:

Float Özelliğini Kullanarak Sola ve Sağa Hizalama

---

Elemanları hizalamak için başka bir yöntem float özelliği kullanmaktır:

CSS:

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

HTML:

<div class="right">
 <p>Dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
</div>

ÇIKTI:

Sonra overflow: auto; bu sorunu gidermek için içeren öğeye ekleyebiliriz :

ÖRNEK:

.clearfix {
  overflow: auto;
}

Dikey Ortalamada - Dolgu kullan

---

Bir öğeyi CSS'de dikey olarak ortalamanın birçok yolu vardır. Basit bir çözüm üst ve alt değerleri belirtilmiş padding kullanmaktır :

CSS:

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

HTML:

<div class="center">
  <p>Bu metin dikey olarak ortalandı.</p>
</div>

ÇIKTI:

Dikey ve yatay ortalamak için padding ve text-align: center kullanılması:

CSS:

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

HTML:

<div class="center">
  <p>Dikey ve yatay olarak ortalandı.</p>
</div>

ÇIKTI:

Dikey Olarak Ortala - Satır Yüksekliğini Kullan

---

Başka bir yöntem, line-height özelliğinin değerine eşit bir height (Yükseklik) değerle kullanmaktır.

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

/* metinde birkaç satır varsa aşağıdaki kodları kullanın*/
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

HTML:

<div class="center">
  <p>Bu yazı Dikey ve yatay olarak ortalandı.</p>
</div>

ÇIKTI:

Dikey Olarak Ortala position & transform Kullan

Eğer ortalamada padding ve line-height seçenekler değilde, başka bir çözüm kullanmak isyiyorsak position ve transform özelliğini kullanalım

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

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

HTML:

<div class="center">
  <p>Dikey ve yatay ortalandı.</p>
</div>

ÇIKTI:

Dikey Olarak Ortala - Flexbox'ı Kullan

---

HTML öğelerini ortalamak için flexbox'ı da kullanabilirsiniz. Flexbox'ın IE10 ve önceki sürümlerinde desteklenmediğini unutmayın:

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

HTML:

<div class="center">
  <p>Dikey ve yatay olarak ortalandı.</p>
</div>

ÇIKTI:

5404

Gönder