{"id":215,"date":"2014-06-01T10:21:48","date_gmt":"2014-06-01T10:21:48","guid":{"rendered":"http:\/\/localhost\/__sites\/3d_blog\/?p=215"},"modified":"2014-06-04T13:46:19","modified_gmt":"2014-06-04T13:46:19","slug":"arrange-text-to-the-center-of-a-container-div-singel-or-multiline","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=215","title":{"rendered":"arrange text to the center of a container div (single or multiline)"},"content":{"rendered":"<blockquote><p>Goal: show text in a div like in a table cell<\/p><\/blockquote>\n<pre data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">\r\n&lt;style&gt;\r\n.centercenter{\r\n  text-align: center;\r\n  display: table;\r\n}\r\n.centercenter p{\r\n  display: table-cell;\r\n  vertical-align: middle;\r\n}\r\n&lt;\/style&gt;\r\n&lt;div class=&quot;centercenter&quot;&gt;\r\n&lt;p&gt;I'm on the center&lt;br&gt;of my parent&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>That&#8217;s all. Add some additional styles to the container (size, decoration) and&#8230;<\/p>\n<style>\n.centercenter{\n  text-align: center;\n  display: table;\n}\n.centercenter p{\n  display: table-cell;\n  vertical-align: middle;\n}\n#centercentersample .container{\n  position: absolute;\n  width: 300px;\n  height: 80px;\n  border: 1px solid #555;\n  left: 50%;\n  top: 50%;\n  margin-left: -150px;\n  margin-top: -40px;\n}\n#centercentersample .wrapper{\n  position: relative;\n  width: 100%;\n  height: 200px;\n  border-radius: 8px;\n  border: solid 1px #e0e0e0;\n  background-color: #fff;\n  box-shadow: 0px 0px 8px rgba(187, 187, 187, 0.5);\n}\n<\/style>\n<div id=\"centercentersample\">\n<div class=\"wrapper\">\n<div class=\"centercenter container\">\n<p>I&#8217;m on the center<br \/>of my parent<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Here is a small extra: center a div in a div. The old technik play with the margins.<\/p>\n<pre data-enlighter-language=\"css\" class=\"EnlighterJSRAW\">\r\n.divtocenter_container{\r\n  position: relative;\r\n}\r\n.divtocenter{\r\n  position: absolute;\r\n  width: 300px;\r\n  height: 80px;\r\n  left: 50%;\r\n  top: 50%;\r\n  margin-left: -150px; \/* -width\/2   *\/\r\n  margin-top: -40px;   \/* -height\/2  *\/\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Goal: show text in a div like in a table cell That&#8217;s all. Add some additional styles to the container (size, decoration) and&#8230; I&#8217;m on the centerof my parent Here is a small extra: center a div in a div. The old technik play with the margins.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-215","post","type-post","status-publish","format-standard","hentry","category-web-trick"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=215"}],"version-history":[{"count":26,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/215\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/215\/revisions\/355"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}