将Boostrap锚点按钮与FigCaption内底部的文本对齐

Question

我正在尝试将两个相邻的锚点按钮与每个按钮下面的文本对齐。我在图中这样做，因为只有当用户悬停在图像上时，按钮才会显示。然而，我甚至还没有接近。

以下是我迄今为止尝试过的：

<div class="row cs-style-3">
   <div class="col-lg-4 gitem">
   </div>
    <div class="col-lg-4 gitem">
              <figure>
                  <img src="pictures/cover/book-2015.png" alt="">
                  <figcaption class="text-center">
                      <div class="row">
                          <a href="" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-download"></span>Download </a><br />
                          <p>PDF file</p>
                          <a href="" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-download-alt"></span>Download</a>
                          <p>Zip file</p>
                      </div>
                  </figcaption>
              </figure>            
      </div>

   <div class="col-lg-4 gitem">
   </div>

</div><!-- end row -->

Answer 1

您可以将每个按钮和文本对放在自己的列中

<div class="row">
  <div class="col-lg-6">
     <a href="" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-download"></span>Download </a><br />
     <p>PDF file</p>
 </div>
 <div class="col-lg-6">
     <a href="" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-download-alt"></span>Download</a>
     <p>Zip file</p>
 </div>
</div>

Answer 2

试试这个代码。如果我们也给你css会更好。http://jsfiddle.net/2s1g7oLe/

html

<div class="row cs-style-3">
<div class="col-lg-4 gitem"></div>
<div class="col-lg-4 gitem">
    <figure>
        <img src="http://jolka.qwqw.hu/tarhely/jolka/kepek/201406/konyvek10.png" alt="">
        <figcaption class="text-center" >
            <div class="row"> 
                <div class="col-sm-6">
                <a href="" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-download"></span>Download </a>
                <br />
                <p>PDF file</p> 
                </div>
                <div class="col-sm-6"><a href="" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-download-alt"></span>Download</a>
                <p>Zip file</p>
                </div>
            </div>
        </figcaption>
    </figure>
</div>
<div class="col-lg-4 gitem"></div>
</div>
<!-- end row -->

和简单的CSS

figcaption 
{
 display:none
}
figure  
{
text-align:center
}
figure:hover figcaption
{
display:block;
}