HTML Sayfanın Ortasına Div Yerleştirme
HTML’de Divi nasıl sayfanın ortasına getirebileceğinizi anlatacağım.
Öncelikle bir tane div oluşturuyoruz ve divimize id veriyoruz. Daha net görebilmek için içine yazı yazıyoruz.
<div id="orta"> <p> Ortalanmış Yazı </p> </div>
Dive sabit bir yükseklik ve genişlik vereceğiz. Daha iyi gözükmesi için birde arkaplan rengi verelim.
#orta{
width: 100px;
height: 100px;
background-color:red;
}
Divimizin genel style özelliklerini verdik. Ekran küçüldükçe veya büyüdükçe divin ortada kalması için position, left ve right özelliklerini yazıyoruz.
#orta{
width: 100px;
height: 100px;
background-color:red;
position:absolute;
left: 50%;
top: 50%;
}
Şuan ekranı büyütüp küçültürseniz divin sol tarafa daha yakın bir şekilde durduğunu görebilirsiniz. Bunu düzeltmek için divin yükseklik ve genişlik özelliklerinin yarısı kadar marginlerini azaltacağız.
#orta{
width: 100px;
height: 100px;
background-color:red;
position:absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
Bu işlemle birlikte divimiz ortalanmış oldu.
