使用引导程序将列垂直对齐

Question

我row三columns 。 第一个和第二个更宽，第三个更窄，只需要包含一个购买按钮和价格。 这是现在的样子：

我需要将最右边的column与其他column的中间对齐。 尝试了一些建议的组合，但似乎没有用。 这是我的css class ：

.vertical-align {
   flex-direction: row;
   display: inline-block;
   vertical-align: middle;
   float: none;
}

编辑：我要添加整row ：

<div class="row bottom-buffer15 searchresultbg">                      

    <!-- product image column -->
    <div class="col-xs-12 col-sm-3 col-md-3" style="border:1px solid red">
      <a href='#{product.itemUrl}' target="_blank"><img src='#{product.thumbnailUrl}' /></a> <br/>                  
    </div>

    <!-- product details column -->
    <div class="col-xs-12 col-sm-6 col-md-6" style="border:1px solid red">
      <a href='#{product.itemUrl}' target="_blank">#{searchResults.getTruncatedTitle(product)}</a> <br/><br/>       
      <h:panelGroup rendered="#{searchResults.isEbay(product)}">
      Sale Type: #{product.saleType} <br/>
      Bids: #{product.numberOfBids} <br/>
      Time: #{product.timeLeft} <br/>
   </h:panelGroup>

  <!-- site logo -->
  <h:panelGroup rendered="#{searchResults.isEbay(product)}">
    <h:graphicImage library="images" name="ebaylogo.jpg" width="40" />
  </h:panelGroup>

  <h:panelGroup rendered="#{searchResults.isAmazon(product)}">
    <h:graphicImage library="images" name="amazonlogo.jpg" width="40" />  &nbsp;
  </h:panelGroup>

  <h:panelGroup rendered="#{searchResults.isEtsy(product)}">
    <h:graphicImage library="images" name="etsylogo.jpg" width="30" />  &nbsp;
  </h:panelGroup>

</div>

<div class="col-xs-12 col-sm-3 col-md-3 vertical-align" style="border:1px solid red;">
  <a href='#{product.itemUrl}' target="_blank">
    <h:graphicImage name="images/buybutton.jpg" class="img-responsive" style="display: inline-block; margin-left:0px; margin-bottom:-0px;"/>                        
  </a>

    <br/> #{product.currentPrice}
  </div>
</div>

我究竟做错了什么？

EDIT2： JFiddle链接： http : //jsfiddle.net/pc1Lwu0b/

Answer 1

因为您具有固定的高度，所以在第三列中添加了页边距。 此解决方案将起作用。

.vertical-align {
   margin-top: 1.5em;
}