merakli
  • merakli
  • 2 ay önce
  • Css ile div nasıl ortalanır?

    Merhaba arkadaşlar css kullanarak divi nasıl ortalayabilirim? Css ile divi nasıl ortalayabilirim?
    Cevaplar(2)
    hbertancakici
  • hbertancakici
  • 2 ay önce
  • Basit matematik ile her div için uygulayabilirsin. İlk olarak ortalayacağın nesnenin boyutunu bilmen gerekiyor. Örneğin benim 300x300 boyutlarında div kutucuğum olsun. Bunu nerede ortalamak istiyorsan şu kodu kullanarak orta noktasından başlatabilirsin. Fakat küçük bir ayrıntı var. Aşağıdaki resimlerle daha iyi anlayacağını umuyorum. Objeyi orta noktadan başlatmak demek, ortalamak demek değildir. Boş bir sayfa düşün, tam orta noktası aşağıdaki resim gibidir.

    Bu kod parçacığı ise div'i sayfanın orta noktasından başlatıyor.

    Yazılım Soru - Kod Kısmı

    <style>
    div.kutucuk
    {
     position:absolute;
     top:50%;
     left:50%;
    }
    </style>
    
    <div class="kutucuk"></div>

    Görüntüsü ise şöyle olacaktır. https://hizliresim.com/k6NDmJ Fakat düşünülmesi gereken nokta şu, ister div, ister resim olsun. Orta noktasından başlatıyorsak, bunu sola doğru ve yukarıya doğru iteklememiz gerekiyor. bu da resmin veya div'in boyutlarının yarısı kadar yaparak, tam olarak ortalamış olursun. Olması gereken kod ise şu;

    Yazılım Soru - Kod Kısmı

    <style>
    div.kutucu
    {
     position:absolute;
     top:50%;
     left:50%;
     margin-left: -150px;
     margin-top: -150px;
    }
    </style>

    Çıktısı ise tam istediğin gibi olacaktır. [url]null[/url]https://i.hizliresim.com/NDvomg.png Benim örneğimde div boyutu 300x300 oldugu için, -150px sola, -150px yukarıya margin verdim. Resmin boyutu 200px yükseklik, 800px genişlik olsaydı => margin-left : -400px; // Genişliğin yarısı (negatif) margin-top: -100px; // Yüksekliğin yarısı (negatif) şeklinde kullanacaktık. Basitçe mantığı bu.
    Beğen (1) Yorumlar(0) Yorum Yaz
    Gönder
    schlanges
  • schlanges
  • 2 ay önce
  • margin: auto 0;
    Beğen (2) Yorumlar(0) Yorum Yaz
    Gönder

    Cevap yazabilmek için Giriş yapmalısınız.Giriş yapmak için buraya Tıklayın.

    Çalışkan Üyeler


    ismail +709
    blizzard3 +42
    kereme +39
    toprak34 +34

    Kodlarınızı aşağıdaki alana yapıştırın.

  • Kod Ekle İptal Et
  • Giriş/Kayıt

    Bildirimler

    Takip Edenler

    Mesajlar