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:

Bu metin ortalanmıştır.

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:

Bu div kutusu yatay olarak ortalanmıştır.

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:

Dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.







Not: Bir öğe, onu içeren öğeden daha uzunsa ve yüzerse(float), kabının dışına taşar. Bunu düzeltmek için clearfix kesme kullanabilirsiniz (aşağıdaki örneğe bakın).


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:

Bu metin dikey olarak ortalandı.

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 ve yatay olarak ortalandı.



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:

Bu yazı Dikey ve yatay olarak ortalandı.



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 ve yatay ortalandı.



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:

Dikey ve yatay olarak ortalandı.

Ahmet Demir 20/04/2020

Merhaba, Öncelikle güzel paylasımlarınızdan dolayı tesekkür etmek istiyorum. Mekatronik Mühendisiyim. Kendimi ve mesleğimi anlatan bir web sitesi yapmak istiyorum. Nasıl bir site gelistirebilirim. Hangi bölümleri olmalı nasıl bir tasarımı olmalı yardımcı olursanız sevinirim.Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Uyarısını okudum ama kusurabakmayın. Çok güzel paylaşımlarınız var. Bana yardımcı olacağınızı düşünüyorum.

yönetici 21/04/2020

Ahmet, Tasarım olarak websiten için FLAT tasarım uygula google'dan "flat tasarım" araştır, websitende renk uyumuna dikkat et. Ziyaretci sayısı önemli ise webcebir.com'dan bildiğim basit konular daha çok ilgi görüyor. Tabiki ülkene, Milletine faydalı olmak içinde, Ağır konuları ve bahsedilmeyen konuları en basit anlaşır bir düzeyde anlatman Gerekir. Mekatronik biliminden pek anlamam konuları sen belirlemen gerekir. Mekatronik konusunda Yerli ve yabancı siteleri incele. Ayrıca şu konuya bak. UI ve UX Tasarım Nedir?
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

9218

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML AÇIKLAMA SATIRI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.