图像下方的位置按钮

Question

我试图在图片下面放置这些图标。我可以让它们出现在下面，但不是在形象之后。另外在移动版本上，它不是一排。按钮不在一行中，有一个按钮比列更好。提供的截图。请帮助

这里是我的网站：http://www.kiljakandweb.com

这里是我的HTML：

 <section class="projects" id="myprojects"> 
     <div class="row"> 

     <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12"> 
     <img src="images/iPad2.png" alt=""> 
    </div> 

     </div> 

    </section> 
<section> 
    <div class="row"> 
      <div class="col-lg-1 col-xs-2 col-sm-2 col-md-1 col-centered"> 
     <a href="#" ><i class="fa fa-plus-circle fa-3x buttons1" aria-hidden="true"></i></a> 
     <a href="#" ><i class="fa fa-chevron-circle-down fa-3x buttons1" aria-hidden="true"></i></a> 
    </div> 
    </div> 
</section> 

这里是我的CSS：

img { 
    float: right; 
    width: 85%; 
    margin-top: 250px; 
    margin-right: -25px; 
    padding-bottom:200px; 
} 

.col-centered{ 
    float: none; 
    margin: 0 auto; 
    padding-bottom: 200px; 
} 

的jQuery：

Answer 1

首先出现的是一个填充以防止出现以下图像的按钮。您可以通过将其添加到您的css文件中来轻松解决这个问题。

section#myprojects img { 
    padding-bottom: 0px; 
} 

而对于第二个问题，我建议你给一个ID这个div像这样：

<div class="col-lg-1 col-xs-2 col-sm-2 col-md-1 col-centered" id="yourIDhere"> 

然后你就可以把它在你的CSS文件：

#yourIDhere a { 
    display: table-cell; 
    padding: 5px; 
} 

或试试这个（如果您在其他地方使用此类定义，我不会推荐）

.col-lg-1.col-xs-2.col-sm-2.col-md-1.col-centered a { 
    display: table-cell; 
    padding: 5px; 
}