在绝对定位div内没有高度的垂直对齐？

Question

我正在一个响应式网站上工作，标准的“技巧”让div内容垂直对齐不起作用，因为我的容器是绝对定位的。

<div class="product"> 
    <div class="prod-info"> 
     <div class="valign"> 
      <h3>Vantage</h3> 
      <p>Vestibulum luctus laoreet lacus, in viverra metus pharetra sit amet.</p> 
      <div class="btns"> 
       <a href="#">View Details</a> 
       <a href="#">Add to Cart</a> 
      </div> 
     </div> 
    </div> 
    <div class="ftd-img"><img src="images/products/picture.jpg"></div> 
</div> 

.prod-info是绝对定位在浮动元素.product内部。我需要.prod-info里面的内容是垂直对齐的，但我似乎无法让它工作......我附上一个JS小提琴的代码和CSS我到目前为止...任何帮助将不胜感激。

http://jsfiddle.net/BFQx8/

Answer 1

可以完成你使用的技术想要什么this文章解释。这里的工作示例：

http://jsfiddle.net/BFQx8/4/

我里面加.prod-info-container的含量和附加值鬼元素到其父.prod-info。 Ghost元素具有100％的高度，并且它们都是内联块，这样内容就垂直对齐中间。加入CSS代码是如下：

.product-feed .prod-info:after { 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
} 
.prod-info-container { 
    display: inline-block; 
    vertical-align: middle; 
}