{"id":7509,"date":"2012-09-12T18:42:58","date_gmt":"2012-09-12T13:12:58","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=7509"},"modified":"2016-12-19T17:43:45","modified_gmt":"2016-12-19T12:13:45","slug":"making-a-text-vertical-aligned-in-a-div","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/making-a-text-vertical-aligned-in-a-div\/","title":{"rendered":"Making a text vertical aligned in a DIV"},"content":{"rendered":"

Recently in my project I had to implement one page in which an image and the related text had to be shown side by side using the DIV tags, where the text needed to be centered vertically with respect to the image.
\n
\nExample :<\/strong> Let’s take a scenario where we cannot<\/strong> use vertical-align with DIV to display the text in center adjacent to the image.
\n
\nHere we are having an unordered-list having 2 DIV components containing an image and text respectively.<\/p>\n

[html]<\/p>\n

&amp;lt;ul&amp;gt;&amp;lt;li&amp;gt;<\/p>\n

&amp;lt;div class=&amp;quot;image&amp;quot;&amp;gt;&amp;lt;\/div&amp;gt;<\/p>\n

&amp;lt;div class=&amp;quot;details&amp;quot;&amp;gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry.&amp;lt;\/div&amp;gt;<\/p>\n

&amp;lt;\/li&amp;gt;&amp;lt;\/ul&amp;gt;<\/p>\n

[\/html]
\n
\nTo make the DIV adjacent to each other we have applied the following CSS. But still it does not solve our use case to centrally align the text in DIV as specified above.<\/p>\n

[css]<\/p>\n

ul{ list-style:none; margin:0px;}<\/p>\n

ul li{\u00a0 margin-bottom:20px;}<\/p>\n

ul li .image{ border:1px solid #666; height:100px; width:100px; float:left; margin-right:10px;}<\/p>\n

ul li .details{ \u00a0color:#000;\u00a0 font-size:14px; min-height:100px; }<\/p>\n

ul li .details p{ margin:0px;}<\/p>\n

[\/css]<\/p>\n

Here is the output of the above CSS. The text will start from top of the DIV and will be displayed as follows:<\/p>\n

\nIf we want the text to be centrally aligned in the text DIV, you need to do the following steps:<\/p>\n

    \n
  1. Add following CSS property display:table<\/strong> to the LI<\/strong> element.<\/li>\n
  2. Then you need to add CSS properties display:table-cell; \u00a0vertical-align:middle;<\/strong> \u00a0to the class named ‘details’<\/strong> which is applied on DIV containing text.<\/li>\n<\/ol>\n

    \n[css]<\/p>\n

    ul li{\u00a0 margin-bottom:20px; display:table;}<\/p>\n

    ul li .details{ display:table-cell; vertical-align:middle; color:#000;\u00a0 font-size:14px; min-height:100px; }<\/p>\n

    [\/css]<\/p>\n

    After applying this CSS to your HTML, your output will look like this :<\/p>\n

    \nHope it helps. \ud83d\ude42
    \n
    \nRegards.
    \nRajan Shergill<\/a>
    \n    rajan@intelligrape.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    Recently in my project I had to implement one page in which an image and the related text had to be shown side by side using the DIV tags, where the text needed to be centered vertically with respect to the image. Example : Let’s take a scenario where we cannot use vertical-align with DIV […]<\/p>\n","protected":false},"author":50,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[1],"tags":[245,221,4842,964,963,962],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/7509"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=7509"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/7509\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=7509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=7509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=7509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}