{"id":929,"date":"2010-08-31T18:24:08","date_gmt":"2010-08-31T12:54:08","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=929"},"modified":"2010-08-31T18:24:08","modified_gmt":"2010-08-31T12:54:08","slug":"vertically-middle-align-the-div-tag","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/vertically-middle-align-the-div-tag\/","title":{"rendered":"Vertically middle align the DIV tag using CSS"},"content":{"rendered":"

In this article, i will emphasize on the way of vertically align the text in DIV tag of HTML.<\/p>\n

First note i want to share is that, DIV tag is not for the purpose to contain the texts. It is utilized mainly for the placing controls and components.<\/p>\n

Below is two methods which will work on all browsers to vertically align the text in DIV \u00a0tag.<\/p>\n

Steps for Method 1:<\/strong><\/p>\n

\n
    \n
  1. Specify the parent container as position:relative or position:absolute.<\/li>\n
  2. Specify a fixed height on the child container.<\/li>\n
  3. Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.<\/li>\n
  4. Set margin-top:-yy where yy is half the height of the child container to offset the item up.<\/li>\n<\/ol>\n<\/div>\n

    <\/p>\n

    Steps for Method 2:<\/strong><\/p>\n

      \n
    1. Set the line-height of the parent element to the fixed height you want.<\/li>\n<\/ol>\n

      Note: <\/strong>method 2 will work only for the single line contents.<\/p>\n

      Demo – <\/strong>Middle Align the DIV tag in HTML<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

      Source code and Methods to Middle align the text in DIV tag in HTML<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[26],"tags":[67,338],"class_list":["post-929","post","type-post","status-publish","format-standard","hentry","category-web","tag-css","tag-web"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":594,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-gradient-header-using-css\/","url_meta":{"origin":929,"position":0},"title":"Create Gradient Header using CSS","author":"Jitendra","date":"July 6, 2010","format":false,"excerpt":"Create a Gradient effect in heading tag of HTML using simple CSS trick","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Create attractive headers in HTML using CSS","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/07\/header.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5843,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/circular-progress-bar-salesforce-lightning-component\/","url_meta":{"origin":929,"position":1},"title":"Circular Progress Bar – Salesforce Lightning Component","author":"Jitendra","date":"December 19, 2016","format":false,"excerpt":"Demo and Complete Source code of Circular Progress Bar, Salesforce Lightning Component","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circular-Progress-Bar.gif?fit=332%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5717,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/flipcard-lightning-component\/","url_meta":{"origin":929,"position":2},"title":"Flipcard Lightning Component","author":"Jitendra","date":"September 8, 2016","format":false,"excerpt":"A simple CSS based animated Flip card Lightning Component for beginners","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Flipcard Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/FlipCard-Component.gif?fit=420%2C328&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5861,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/circular-progress-bar-with-conditional-theme-salesforce-lightning-component\/","url_meta":{"origin":929,"position":3},"title":"Circular Progress Bar with Conditional Theme \u2013 Salesforce Lightning Component","author":"Jitendra","date":"December 20, 2016","format":false,"excerpt":"Salesforce Lightning Component - Circular Progress Bar with Conditional Theme. Ready to be used by Developers and Admins on App builder for any object. No External Javascript Library, Lightweight CSS based.","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Circular Progress Bar v2","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2657,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-simple-drag-and-drop-widget-like-igoogle-using-jquery\/","url_meta":{"origin":929,"position":4},"title":"Create Simple Drag and Drop Widget like iGoogle using JQuery","author":"Jitendra","date":"January 20, 2012","format":false,"excerpt":"Live Demo with source code on creating Simple Drag and Drop Widget using JQuery plugin like iGoogle","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"jQuery Drag and Drop Widgets","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/01\/jQuery-Drag-and-Drop-Widgets.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/01\/jQuery-Drag-and-Drop-Widgets.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/01\/jQuery-Drag-and-Drop-Widgets.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":65,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/highlight-current-field-using-jquery\/","url_meta":{"origin":929,"position":5},"title":"Highlight Current field using JQuery","author":"Jitendra","date":"May 10, 2010","format":false,"excerpt":"Write below HTML code : This will create two text boxes. Using jQuery, we can watch for an event where an input form comes into focus: Add link to JQuery file in script tag as shown in below line: Now, add below CSS in document. Then at last write JQuery\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Selecting field using jquery","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/11-300x50.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=929"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/929\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}