4.2/5 Görüntülenme: 9701

Css Div Dikey Ortalama


Tablolarda vertical align seçeneğini middle yapınca ortalanıyordu fakat Css de bunu nasıl yapacağız. Bu makalde Css dikey ortalamasını anlatalım.

Css kodlarımızla Div içerisindeki başka bir divi ortalarız bu şekilde tablo kullanmadan bir div içerisindeki resim veya yazıyı dikey ortalamış oluruz.


 Css ile Resim dikey ortalama:



 <style>
  .cerceve{
   width:300px; height:200px; border:solid 1px #003;
   position:relative;
  }
  .cerceve img{
   position: absolute;
   top: 0; bottom: 0; left: 0; right: 0; margin: auto; 
  }
 </style>
 <div class="cerceve">
   <img src="http://www.limitsizbilgi.com/images/li120x60.png" />
 </div>

 


Transform Ortalama:

html body arasındaki tüm sayfayı ortalama yapacağımız zaman kullanırız.

Mobil cihazları desteklemektedir.


<style>
 .orta{
  position:fixed; width:100px; height:50px;
  left: 50%; top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
 }
</style>
<div class="orta">giriş orta</div>



CSS Table Ortalama:

yazı resim

<style>
#ana{display:table; width:300px; height:300px; text-align:center; border:solid 1px #000;}
#alt{#top: 50%; display: table-cell; vertical-align: middle; }
</style>
<div id="ana">
 <div id="alt">Ortalanacak yazi veya resim buraya</div>
</div>

Konu (50) ile ilgili admin @ limitsizbilgi.com adresine E-mail gönderebilirsiniz. İsa Şahintürk