Question

我正在一个快速响应的网站上工作，以及标准的＆＃34;技巧＆＃34;由于我的容器是绝对定位的事实，使得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 Fiddle，其中包含我到目前为止的代码和CSS。任何帮助都会非常感激。

http://jsfiddle.net/BFQx8/

Answer 1

您可以使用this文章中介绍的技术完成您想要的操作。这是工作示例：

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

我在.prod-info-container中添加了内容，并在其父.prod-info中添加了ghost元素。 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;
}

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

1 个答案: