Css ile div nasıl ortalanır?
Merhaba arkadaşlar css kullanarak divi nasıl ortalayabilirim?
Css ile divi nasıl ortalayabilirim?
Cevaplar(2)
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.
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;
Çı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.
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.
