Question

如何将div与父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>

这是我包含的HTML。父div采用图像内容的大小。我希望div“text-content”与父div的中心对齐，即与图像内容div的中心对齐。

我试过这个逻辑

.parentdiv {
     display: table;
}

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

在这种情况下，垂直对齐没有变化。请为我提供这个问题的解决方案。

Answer 1

似乎可以工作，也许应用了另一个css。见http://codepen.io/adrienmar/pen/PNWYMw

.parentdiv {
  display: table;
}

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

Answer 2

试试这个

.parentdiv {
  position:relative;
 }

.text-content {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
}

如何相对于父div将div垂直对齐到中心

2 个答案: