如何垂直对齐div

Question

我希望价格在同一行，就在查看详细信息按钮上方。我试过了

vertical-align: bottom 

但没有运气。 http://enterprise-demo.user.magentotrial.com/women/tops-blouses.html

Answer 1

为每个div提供类似这样的课程

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 2

您也可以移动

<div class="price-box"> 

中的

<div class="action">

作为他的第一个孩子。

Answer 3

如果您可以替换HTML结构，那么您可以将div.price-box复制到.actions div中，就像@Roy所说的那样。

否则，你可以做到

.products-grid .price-box{position:absolute;width:100%;bottom:90px}

价格未与“查看详细信息”按钮垂直对齐，因为div.action块有position:absolute。为了使价格始终高于“查看详细信息”按钮，您可以将其置于绝对位置。

Answer 4

你有很多方法可以垂直对齐div。最好的方法是学习垂直对齐的概念，并使用最佳方法来处理您的情况。 This blog post显示了6种方法，并帮助了我很多。