Div Dikey Ortalama Css

Div Dikey Ortalama Css

Sayfamızda yatay ve dikey olarak bir div içeriğini ortalamak istiyorsunuz. Yatay olarak ortalamak için text-align:center; özelliğini kullanabiliyorsunuz Ancak dikey ortalamak için farklı kodlar gerekebiliyor. Css kodu olarak vertical-align:middle; özelliğini kullanmanız gerekiyor. Değişik div içeriklerini Yazı veya Metinleri, Resim veya Tabloları div içerisinde veya herhangi bir sayfa içeriğinde Css kodlarını kullanarak kolaylıkla bu işlemi gerçekleştirebilirsiniz.Örnek iki yazı div içeriğiyle bu işlemi anlatmaya çalışacağız.

Dikey Ortalama Div Resmi

Uygulama Css Kodu

<style>
 .AnaGövde
  {
   background:white;
   height:50%;
   width:100%;
   display:table;
   color:blue;
   font-size:90px;
  }
 .Gövde
  {
   border-style:solid; 
   border-width:15px; 
   border-top-color:#ff0000; 
   border-left-color:#00cc00; 
   border-right-color:#00cc00; 
   border-bottom-color:#ff0000; 
   display:table-cell;
   vertical-align:middle;
   text-align:center;
  }
 .AnaGövde2
  {
   background:blue;
   height:50%;
   width:100%;
   display:table;
   color:white;
   font-size:90px;
  }
 .Gövde2
  {
   border-style:solid; 
   border-width:15px; 
   border-top-color:#00cc00;
   border-left-color:#ff0000;
   border-right-color:#ff0000;
   border-bottom-color:#00cc00; 
   display:table-cell;
   vertical-align:middle;
   text-align:center;
  }
</style>

Uygulama Html Kodu

<div class="AnaGövde">
 <div class="Gövde">
  Div Dikey Ortalama<br />
 </div>
</div>
<div class="AnaGövde2">
 <div class="Gövde2">
  Div Dikey Ortalama<br />
 </div>
</div>