2

How do I vertically align a div with respect to the parent div?

<div class="col-xs-12 pr30 parentdiv">
    <div class="image-content col-xs-9 col-md-5 pull-right pl0 pr0 ml0" style="margin-right:6% !important;">
         <div class="pull-left">
            <a href="productbanner.html">
                <img height="100%" width="100%" alt="Liberty Global logo" src="productbanner.JPG" class="img-responsive pull-left">
            </a>

         </div>
    </div>
    <div class="text-content col-xs-12 col-md-6 pull-left">
    <div>
         <div class="heading-content">
               <span class="textDecreaseCaption">
                   <a href="productbanner.html">Product Banner</a>
               </span>
         </div>
         <div class="smallspace"></div>
         <div class="description-content textDecrease">                     
              Product details banner with image component
         </div>
   </div>
 </div>

This is the HTML I have included. The parent div takes the size of the image-content. I want the div "text-content" to be aligned to the center of the parent div, that is to the center of the image-content div.

I tried this logic

.parentdiv {
     display: table;
}

 .text-content {
    display: table-cell;
    vertical-align: middle;
 }

There's no change in the vertical alignment in this case. Please provide me a solution for this issue.

Pᴇʜ
  • 56,719
  • 10
  • 49
  • 73
Anil Simon
  • 121
  • 1
  • 7
  • This might help : https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically (Also, note that your question will either be closed as a duplicate, or degenerate into an endless stream of "Did you try xyz ?", followed by "xyz did not work in my case" - probably because the question does not contain the *whole* html / css, we don't don't know which browser you're using, the moon phases are not right, etc... Anyway, good luck to you. You're trying to vertically center things in CSS. In 2016. You'll *need* luck.) – phtrivier Mar 16 '16 at 13:30

2 Answers2

4

Seems to work as it, maybe another css is applied. See http://codepen.io/adrienmar/pen/PNWYMw

.parentdiv {
  display: table;
}

.text-content {
  display: table-cell;
  vertical-align: middle;
}
ad_revenge
  • 101
  • 4
  • am not able to replicate the results. and btw i forgot to mention .pull-left{ float:left !important; } .pull-right{ float:right !important; } – Anil Simon Mar 18 '16 at 06:12
  • when i give these css properties it fails. Please provide me a solution which uses these properties too. i had given display:table for child div and its working fine in chrome,but not in firefox – Anil Simon Mar 18 '16 at 06:15
  • Maybe you should remove your pull-* classes, why are they here ? Can you reproduce your problem using codepen or another tool ? Here we have a part of your code, working as it so provide more informations please – ad_revenge Mar 22 '16 at 09:49
0

Try this 

.parentdiv {
  position:relative;
 }

.text-content {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
}
Harden Rahul
  • 930
  • 8
  • 15