Ana Sayfa » Web » Html » Ekranin Ortasina Div Yerlestirmek

Ekranin Ortasina Div Yerlestirmek

Bir Divi ekranin tam ortasina yerlestirmek hemen hemen hepimizin ihtiyaci olmustur. Tanimladiginiz bir divi CSS kullanarak çok basit bir sekilde ekranin ortasina yerlestirebiliriz.

Ilk olarak bir HTML sayfasi olusturun ve ekranin tam ortasinda gözükmesini istedigimiz divi asagidaki gibi tanimlayin.

<div id="container">
<p>Ekranin Ortasina Gelecek Olan Div</p>
</div>
Div için sabit bir genislik ve yükseklik verelim.
#container {
  width: 100px;
  height: 100px;
  background-color: #567;
}

Ekran boyutlarindan bagimsiz olarak divi belirli bir yere yerlestirmek için divin top ve left pozisyonlarina %50 veriyoruz.

#container {
  width: 100px;
  height: 100px;
  background-color: #567;

  position:absolute;
  left: 50%;
  top: 50%;
}

Yukaridaki gibi birakirsak divin sol trafi ve en üst tarafi ekranin tam ortasinda olacaktir. Ama bizim istedigimiz ise dinin tam merkezinin ekranin ortasinda olmasi. Öyleyse soldan div genisliginin yarisi kadar sola, üstten divin yüksekliginin yarisi kadar yukari tasirsa istedigimizi elde etmis oluruz.

#container {
  width: 100px;
  height: 100px;
  background-color: #567;
   
  position:absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

HTML sayfamiz asagidaki gibi olacaktir.

 
<html>
<head>
<style>
    #container
    {
        width: 100px;
        height: 100px;
        background-color: #567;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
</style>
</head>
<body style="background:#000">
    <div id="container">
    <p>Ekranin Ortasina Gelecek Olan Div</p>
    </div>
</body>
</html

Yazar Hakkında

Mehmet Sabri KUNT

Google Plus
Yazilim Mutfagi kurucu ve yöneticisidir. 2005 Selçuk Ünv Bilgisayar mühendisligi mezunudur. Telekomünikasyon sektöründe BI&DWH alanindan çalismaktadir.

Makale Sayısı : 116

Ekranin Ortasina Div Yerlestirmek

12 yorum

Kategori: