{"id":154,"date":"2015-12-27T07:12:50","date_gmt":"2015-12-27T07:12:50","guid":{"rendered":"http:\/\/rat32.com\/rat32\/?p=154"},"modified":"2015-12-27T08:08:57","modified_gmt":"2015-12-27T08:08:57","slug":"how-to-vertically-align-text-to-the-center-inside-div","status":"publish","type":"post","link":"https:\/\/rat32.com\/rat32\/2015\/12\/27\/how-to-vertically-align-text-to-the-center-inside-div\/","title":{"rendered":"How to vertically align text to the middle inside div?"},"content":{"rendered":"<p>Sometimes its a headache aligning the text elements inside div to the middle. The easiest solution is to add line-height value equal to the height of the div element.<\/p>\n<p>Problem:<br \/>\nSuppose we have<\/p>\n<pre class=\"lang:css decode:true \" >&lt;style&gt;\r\n#box{\r\n  float:left;\r\n}\r\n#btn{\r\n  height:50px;\r\n}\r\n&lt;\/style&gt;<\/pre>\n<pre class=\"lang:xhtml decode:true \" >&lt;button id=\"btn\"&gt;Click me!&lt;\/button&gt;&lt;div id=\"box\"&gt;This is a text&lt;\/div&gt;\r\n<\/pre>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/KKNeOZe.png\" alt=\"unaligned text with button\" \/><br \/>\n<br \/> This does not look good because it is not vertically aligned to the middle. So the solution is to add line and line-height to the box div. <\/p>\n<pre class=\"lang:css decode:true \" >&lt;style&gt;\r\n#box{\r\n  float:left;\r\n  height:50px;\r\n  line-height:50px;\r\n}\r\n\r\n&lt;\/style&gt;<\/pre>\n<p>The final corrected output likes this:<br \/>\n<img decoding=\"async\" src=\"http:\/\/i.imgur.com\/NuavW7L.png\" alt=\"aligned text with button\" \/><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Sometimes its a headache aligning the text elements inside div to the middle. The easiest solution is to add line-height value equal to the height of the div element. Problem: Suppose we have &lt;style&gt;&#46;&#46;&#46;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,7],"tags":[83,81,80,79,82],"class_list":["post-154","post","type-post","status-publish","format-standard","hentry","category-css","category-how-to","tag-align","tag-css","tag-div","tag-middle","tag-vertically"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/rat32.com\/rat32\/wp-json\/wp\/v2\/posts\/154"}],"collection":[{"href":"https:\/\/rat32.com\/rat32\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rat32.com\/rat32\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rat32.com\/rat32\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rat32.com\/rat32\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":8,"href":"https:\/\/rat32.com\/rat32\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":162,"href":"https:\/\/rat32.com\/rat32\/wp-json\/wp\/v2\/posts\/154\/revisions\/162"}],"wp:attachment":[{"href":"https:\/\/rat32.com\/rat32\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rat32.com\/rat32\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rat32.com\/rat32\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}