Beyaz.Net İpucu
Ekranın Ortasına Div Yerleştirmek
Ekranın Ortasına Div Yerleştirmek
Bir Divi ekranın tam ortasına yerleştirmek hemen hemen hepimizin ihtiyacı olmuştur. Tanımladığınız bir divi CSS kullanarak çok basit bir şekilde ekranın ortasına yerleştirebiliriz.
İlk olarak bir HTML sayfası oluşturun ve ekranın tam ortasında gözükmesini istediğimiz divi aşağıdaki gibi tanımlayın.
|
1 2 3 |
<div id="container"> <p>Ekranın Ortasına Gelecek Olan Div</p> </div> |
Div için sabit bir genişlik ve yükseklik verelim.
|
1 2 3 4 5 |
#container { width: 100px; height: 100px; background-color: #567; } |
Ekran boyutlarından bağımsız olarak divi belirli bir yere yerleştirmek için divin top ve left pozisyonlarına %50 veriyoruz.
|
1 2 3 4 5 6 7 8 9 |
#container { width: 100px; height: 100px; background-color: #567;
position:absolute; left: 50%; top: 50%; } |
Yukarıdaki gibi bırakırsak divin sol trafı ve en üst tarafı ekranın tam ortasında olacaktır. Ama bizim istediğimiz ise dinin tam merkezinin ekranın ortasında olması. Öyleyse soldan div genişliğinin yarısı kadar sola, üstten divin yüksekliğinin yarısı kadar yukarı taşırsa istediğimizi elde etmiş oluruz.
|
1 2 3 4 5 6 7 8 9 10 11 |
#container { width: 100px; height: 100px; background-color: #567;
position:absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } |
HTML sayfamız aşağıdaki gibi olacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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>Ekranın Ortasına Gelecek Olan Div</p> </div> </body> </html |