圖像下方的位置按鈕

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