{"id":2555,"date":"2020-01-10T11:21:21","date_gmt":"2020-01-10T11:21:21","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=2555"},"modified":"2022-02-17T07:13:48","modified_gmt":"2022-02-17T07:13:48","slug":"vertical-align","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/css\/align\/vertical-align","title":{"rendered":"Vertical Align"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Good resources<\/h4>\n\n\n\n<p><a href=\"https:\/\/blog.logrocket.com\/13-ways-to-vertical-center\/\">https:\/\/blog.logrocket.com\/13-ways-to-vertical-center\/<\/a> <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Classic align middle method<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.the_style_of_the_container {\n  position: relative;\n}\n.the_style_of_my_element{\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);  \/*For text can need 54%*\/\n}<\/code><\/pre>\n\n\n\n<p>The translateY repositions the element vertically so that it becomes centered at the 50% point itself<\/p>\n\n\n\n<p>For center aligned text:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.the_style_of_my_element{\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);  \/*For text can need 54%*\/\n\n  text-align: center;\n  width: 100%;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Place an image in the center of the browser window<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;div style=\"top:0; right:0; bottom:0; left:0; position:fixed !important; position:relative;\">\n    &lt;div style=\"position: absolute; top: 50%; transform: translateY(-50%); height: 200px; width:100%;\">\n      &lt;div style=\"width:200px; margin-left:auto; margin-right:auto; text-align:center;\">\n        &lt;img src=\"images\/logo.png\" width=\"200\" height=\"200\" alt=\"\"\/>\n      &lt;\/div>\n    &lt;\/div>\n  &lt;\/div><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Placing text at the bottom of the screen<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;div style=\"top:calc(100vh - 16px); right:0; bottom:0; left:0; position:fixed !important; position:relative;\">\r\n    &lt;div style=\"text-align:center; font-size:10px;\">\r\n      &lt;span>Links&lt;\/span>\r\n    &lt;\/div>\r\n  &lt;\/div><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Good resources https:\/\/blog.logrocket.com\/13-ways-to-vertical-center\/ Classic align middle method The translateY repositions the element vertically so that it becomes centered at the 50% point itself For center aligned text: Place an image in the center of the browser window Placing text at the bottom of the screen<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[222,245],"tags":[],"class_list":["post-2555","post","type-post","status-publish","format-standard","hentry","category-align","category-text-css"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=2555"}],"version-history":[{"count":6,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2555\/revisions"}],"predecessor-version":[{"id":3495,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2555\/revisions\/3495"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=2555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=2555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=2555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}