{"id":136,"date":"2012-10-08T04:02:00","date_gmt":"1970-01-01T00:00:00","guid":{"rendered":"http:\/\/www.yazilimmutfagi.com\/?p=136"},"modified":"2012-10-08T04:02:00","modified_gmt":"1970-01-01T00:00:00","slug":"ekranin-ortasina-div-yerlestirmek","status":"publish","type":"post","link":"https:\/\/www.yazilimmutfagi.com\/index.php\/2012\/10\/08\/ekranin-ortasina-div-yerlestirmek\/","title":{"rendered":"Ekranin Ortasina Div Yerlestirmek"},"content":{"rendered":"

Bir Divi ekranin tam ortasina yerlestirmek hemen hemen hepimizin ihtiyaci olmustur. Tanimladiginiz bir divi CSS kullanarak \u00e7ok basit bir sekilde ekranin ortasina yerlestirebiliriz.<\/p>\n\n

Ilk olarak bir HTML sayfasi olusturun ve ekranin tam ortasinda g\u00f6z\u00fckmesini istedigimiz divi asagidaki gibi tanimlayin.<\/p>\n\n

\n<div id=\"container\">\n<p>Ekranin Ortasina Gelecek Olan Div<\/p>\n<\/div>\n<\/pre>\n\t\n.<\/a>\n\n\nDiv i\u00e7in sabit bir genislik ve y\u00fckseklik verelim.<\/strong>\n
\n#container {\n  width: 100px;\n  height: 100px;\n  background-color: #567;\n}\n<\/pre>\n\n
Ekran boyutlarindan bagimsiz olarak divi belirli bir yere yerlestirmek i\u00e7in divin top ve left pozisyonlarina %50 veriyoruz.<\/p> \n
\n#container {\n  width: 100px;\n  height: 100px;\n  background-color: #567;\n\n  position:absolute;\n  left: 50%;\n  top: 50%;\n}\n<\/pre>\n\n\n
Yukaridaki gibi birakirsak divin sol trafi ve en \u00fcst tarafi ekranin tam ortasinda olacaktir. Ama bizim istedigimiz ise dinin tam merkezinin ekranin ortasinda olmasi. \u00d6yleyse soldan div genisliginin yarisi kadar sola, \u00fcstten divin y\u00fcksekliginin yarisi kadar yukari tasirsa istedigimizi elde etmis oluruz.<\/p>\n\n
\n#container {\n  width: 100px;\n  height: 100px;\n  background-color: #567;\n   \n  position:absolute;\n  left: 50%;\n  top: 50%;\n  margin-left: -50px;\n  margin-top: -50px;\n}\n<\/pre>\n\n.<\/a>\n\n
HTML sayfamiz asagidaki gibi olacaktir.<\/p>\n
 \n<html>\n<head>\n<style>\n    #container\n    {\n        width: 100px;\n        height: 100px;\n        background-color: #567;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        margin-left: -50px;\n        margin-top: -50px;\n    }\n<\/style>\n<\/head>\n<body style=\"background:#000\">\n    <div id=\"container\">\n    <p>Ekranin Ortasina Gelecek Olan Div<\/p>\n    <\/div>\n<\/body>\n<\/html\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Bir Divi ekranin tam ortasina yerlestirmek hemen hemen hepimizin ihtiyaci olmustur. Tanimladiginiz bir divi CSS kullanarak çok basit bir sekilde ekranin ortasina yerlestirebiliriz.<\/p>\n","protected":false},"author":517,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[411],"tags":[4448,5190,4327,5078,5670],"_links":{"self":[{"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/posts\/136"}],"collection":[{"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/users\/517"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":0,"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/posts\/136\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/media?parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/categories?post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yazilimmutfagi.com\/index.php\/wp-json\/wp\/v2\/tags?post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}