在絕對位置的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內部的.prod-info進行垂直對齊，但是我似乎無法正常工作...我將JS Fiddle附加了到目前為止的代碼和CSS ...任何幫助將不勝感激。

http://jsfiddle.net/BFQx8/

Answer 1

你可以完成你想要使用的技術在解釋這一文章。 這是工作示例：

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;
}