图像下方的位置按钮

Question

我试图将这些放在图片下方。我可以让它们出现在下面但不是在图像之后。同样在移动版上，它不是一排。按钮不符合列，下面有一个按钮更好。提供截图。请帮忙

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

这是我的 HTML ：

minmax(0, 1fr)

这是我的 CSS ：

     <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>

jQuery ：

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

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

Answer 1

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

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

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

<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;
}