CSS ile Dikey ve Yatay Ortalama Nasıl Yapılır? (CSS Flexbox)

Gold

tuncay

ABONE OL

News

0 yorum

1,015 okunma

Okunuyor CSS ile Dikey ve Yatay Ortalama Nasıl Yapılır? (CSS Flexbox)

CSS ile Dikey ve Yatay Ortalama Nasıl Yapılır? CSS (Cascading Style Sheets), bir web sitesi yaparken “olmazsa olmaz” dediğimiz teknolojilerden. Bu içeriğimizde web yazılımcılarının sürekli kullandığı ve sıklıkla da unutabildiği bir konudan bahsedeceğiz. CSS ile dikey ve yatay ortalama nasıl yapılır? Aslında çok kolay olan bu işlem sadece birkaç saniyenizi alacak. O halde gelin ortalama işlemini adım adım yapalım.

Ortalama işlemini Flexbox yapısını kullanarak yapacağız.

Öncelikle bir adet kapsayıcı Div ve bir adet de ortalayacak olduğumuz Div’i yerleştirelim.

<html>
   <head>
      <title>Web Odası Yazılım Dersleri</title>
      <link rel="stylesheet" href="./style.css">
   </head>
   <body>        
      <div class="main">
         <div class="box centered">İçerik Ortalandı!</div>
      </div>
   </body>
</html>

Ardından aynı yerde bir “style.css” dosyası oluşturuyoruz ve içeriğini şöyle dolduruyoruz;

*{
  padding:0px;/* varsayılan değerleri sıfırlama */
  margin:0px; /* varsayılan değerleri sıfırlama */
}
.main{
  background: gray; /* arka planı gri yapma */
  width: 100%; /* genişliği %100 yapma */
  height: 100vh;/* yüksekliği %100 yapma */
  display:flex; /* flex yapısı */
  justify-content:center; /* yatay ortalama */
  align-items:center; /* dikey ortalama */
}
.box{
  width:200px; /* kutunun genişliği */
  height:200px; /* kutunun yüksekliği */
  background-color:red; /* kutunun arka planı */
  
  text-align:center; /*kutunun içeriğini yatay olarak ortalama */
  line-height: 200px; /*kutunun içeriğini dikey olarak ortalama */
}

Her bir kodun ne anlama geldiğini yanında belirttim. Burada kapsayıcı Div etiketinde bulunan “display:flex;” değeri kutuyu ortalamamız için kullanabileceğimiz özellikleri sağlıyor. “justify-content:center;” ile yatay olarak, “align-items:center;” ile de dikey olarak ortalama işlemini başarmış oluyoruz.

Sonuç

Yaptığımız işleme canlı bir şekilde göz atalım:

See the Pen
CSS İle Div Ortalama by Tuncay (@tuncaykaptan)
on CodePen.

Hatırlatma: Tabii ki CSS teknolojisi ile dikey ve yatay ortalama yapmanın birçok yolu bulunuyor (örn. “margin:auto;”…). Biz bu içeriğimizde sizlere Flexbox yapısı ile elementleri nasıl ortalayabileceğinizi gösterdik. Umuyoruz ki işinize yaramıştır. CSS hakkında daha fazla faydalı içerik için buraya da göz atabilirsiniz.

Web Odası olarak sanattan kripto paralara, yazılım derslerinden oyunlara kadar birçok konuya değiniyor ve okuyucuları sıkmadan kaliteli içerikler üretmeye çalışıyoruz. İçeriklerimiz hakkındaki görüşlerinizi her zaman bizlere yorumlar kısmından iletebilirsiniz. Kendinize çok iyi bakın!