{"id":135,"date":"2009-05-05T12:41:08","date_gmt":"2009-05-05T11:41:08","guid":{"rendered":"http:\/\/x3.net-agenten.de\/?p=135"},"modified":"2009-05-05T12:43:13","modified_gmt":"2009-05-05T11:43:13","slug":"website-mit-vertikaler-zentrierung","status":"publish","type":"post","link":"https:\/\/x3.net-agenten.de\/?p=135","title":{"rendered":"Website mit Vertikaler Zentrierung"},"content":{"rendered":"

Da man fremden Blogs ja nicht trauen kann (ob sie morgen noch da sind), speicher ich das hier auch gleich mal ab *euch schon sagen h\u00f6r ‚machs doch ins wiki’* …. *GNAMPF*<\/p>\n

Also Problem: Man m\u00f6chte\/soll ein Element (div.inhalt) Vertikal zentrieren.<\/p>\n

L\u00f6sung:<\/p>\n

Man packt den inhalt in einen Container, welcher wiederum bei 50% des Browserfensters (top:50%) anf\u00e4ngt.<\/p>\n

div.container {
\nposition: absolute;
\ntop: 50%;
\nwidth: 100%;
\n}
\ndiv.inhalt {
\nmargin-top: -50px;
\nmargin-left: auto;
\nmargin-right: auto;
\nheight: 100px;
\nposition: relative;
\ntext-align: center;
\n}<\/code><\/p>\n

Nachteil an der Nummer: Man muss wissen wie hoch der „inhalt“ ist, um ihn um die H\u00e4lfte seiner H\u00f6he nach oben zu schieben. Sonst w\u00e4re nur der Oberkante des Inhalts mittig ausgerichtet.<\/p>\n","protected":false},"excerpt":{"rendered":"

Da man fremden Blogs ja nicht trauen kann (ob sie morgen noch da sind), speicher ich das hier auch gleich mal ab *euch schon sagen h\u00f6r ‚machs doch ins wiki’* …. *GNAMPF* Also Problem: Man m\u00f6chte\/soll ein Element (div.inhalt) Vertikal zentrieren. L\u00f6sung: Man packt den inhalt in einen Container, welcher wiederum bei 50% des Browserfensters… Website mit Vertikaler Zentrierung<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[23,7],"tags":[56,55],"class_list":["post-135","post","type-post","status-publish","format-standard","hentry","category-php","category-web","tag-css","tag-html","entry"],"_links":{"self":[{"href":"https:\/\/x3.net-agenten.de\/index.php?rest_route=\/wp\/v2\/posts\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/x3.net-agenten.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/x3.net-agenten.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/x3.net-agenten.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/x3.net-agenten.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=135"}],"version-history":[{"count":5,"href":"https:\/\/x3.net-agenten.de\/index.php?rest_route=\/wp\/v2\/posts\/135\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/x3.net-agenten.de\/index.php?rest_route=\/wp\/v2\/posts\/135\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/x3.net-agenten.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/x3.net-agenten.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/x3.net-agenten.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}