HTML Kullanarak Ekranın Ortasına Div Yerleştirme İşlemi?

HTML Kullanarak Ekranın Ortasına Div Yerleştirme İşlemi? Hepinize selam sevgili okurlarım ve Hayırlı Cumalar. Bu gün sizlere ‘DİV Yerleştirme’  konusunu anlatacağım. HTML kodlarını kullanarak bu işlemi gerçekleştireceğiz. Öncelikle şöyle bir İzah yapayım: Div sayfanın her yerine yerleştirebileceğiniz bir bloktur. İçine her muhtelif metin girilebilir. Div’in asıl amacı sayfayı belirli bloklara bölerek metin girişlerinin daha sorunsuz yapılması, art projelerin daha sorunsuz atanması, özelliklerin daha sorunsuz kullanılmasıdır. Bir Divi ekranın tam ortasına yerleştirmek hemen hemen herkesin ihtiyacı olmuştur. Tanımladığınız bir divi CSS kullanarak aşırı basit bir biçimde ekranın ortasına yerleştirebiliriz. İlk şekilde bir HTML sayfası oluşturun ve ekranın tam ortasında gözükmesini istediğimiz divi aşağıdaki benzeri tanımlayın.         1  <div id=”container”>         2  <p>Ekranın Ortasına Gelecek Olan Div</p>         üç  </div> ———————————————————————————- Div için sabit bir genişlik ve yükseklik verelim.         1  #container {         2     width: 100px;         üç     height: 100px;         4     background-color: #567;         5  } ———————————————————————————- Ekran boyutlarından müstakil şekilde divi belirli bir yere yerleştirmek için divin top ve left pozisyonlarına %50 veriyoruz.         1  #container {                       2     width: 100px;         üç     height: 100px;         4     background-color: #567;         5     position:absolute;         altı     left: 50%;         7     top: 50%;         8  } ———————————————————————————- Yukarıdaki benzeri 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  #container {         2     width: 100px;         üç     height: 100px;         4     background-color: #567;              5     position:absolute;         altı     left: 50%;         7     top: 50%;         8     margin-left: -50px;         9     margin-top: -50px;         on  } ———————————————————————————- HTML sayfamız aşağıdaki benzeri olacaktır.         1  <html>         2  <head>         üç  <style>         4         #container         5         {         altı            width: 100px;         7            height: 100px;         8            background-color: #567;         9            position: absolute;         on            left: 50%;         11            top: 50%;         12            margin-left: -50px;         13            margin-top: -50px;         14         }         15  </style>         16  </head>         17  <body style=”background:#000”>         18           <div id=”container”>         19           <p>Ekranın Ortasına Gelecek Olan Div</p>         20           </div>         21  </body>         22  </html> Arama Terimleri: html de sayfanın ortasına yerleştirme


Yapılan Yorumlar
Erdem OFLAZ

Bir mum, diğer mumu tutuşturmakla ışığından bir şey kaybetmez.
 Kategoriler
 Popüler yazılar