图片下方的位置按钮

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：

$(document).ready(function(){
    $("img").fadeOut("fast");
    $(".buttons1").fadeOut("fast");

    $("a").on("click", function(){
        $("img").fadeIn(2000);
    })

    $("a").on("click", function(){
        $(".buttons1").fadeIn(2000);
    })

    });

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