CSS如何在圖片下添加按鈕

我已通過網絡搜索，但無法找到答案。CSS如何在圖片下添加按鈕

我想提出以下幾個圖像這是在一個表，按鈕像這樣：

__________ _________ 
|  | |  | 
| image | | image2 | 
|________| |________| 
|_button_| |_button2|

我嘗試使用換行符（如這裏建議：How can I set button below image?），但沒有奏效。按鈕（s）將被放置怪異。

將它們放置在相對於圖像的位置會很好，因爲它們應該總是在它們下面。

任何幫助表示讚賞。

來源

2015-12-24 Tom Collins

這裏是一個例子https://jsfiddle.net/1dw55eu7/1/

只是包裝一個div內圖像和另一格內的按鈕，這樣該按鈕將直接在圖片下方級聯那麼，只要你喜歡，例如讓您可以風格的按鈕的DIV按鈕位於圖像下方，如提供的樣本。

CSS

.imgButton{ 
    text-align:center; 
}

HTML

<table> 
    <tr> 
     <td> 
    <div class="imgContainer"> 
      <div> 
       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPy7ZnI46zizXRVoXLbV4Gl6LamFU6g5pqtJj1ijxnO8i-gJWp" width="100px" height="100px"/> 
      </div> 
      <div class="imgButton"> 
       <button value="test">test</button> 
      </div> 
    </div> 
     </td> 
    <td> 
    <div class="imgContainer"> 
      <div> 
       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPy7ZnI46zizXRVoXLbV4Gl6LamFU6g5pqtJj1ijxnO8i-gJWp" width="100px" height="100px"/> 
      </div> 
      <div class="imgButton"> 
       <button value="test">test</button> 
      </div> 
    </div> 
     </td> 
    </tr> 
</table>

來源

2015-12-24 23:22:35

謝謝，這也很好。我認爲這是一種更好的編碼風格，而不是將按鈕放在無花果中。 –

如果你想添加的按鈕+使它們的圖像相同的寬度增加了JS提琴阿德爾建議

.imgContainer img, 
.imgContainer .imgButton button { 
    width: 100%; 
}

https://jsfiddle.net/1dw55eu7/3/ 更新後

來源

2015-12-25 02:53:31

CSS如何在圖片下添加按鈕

回答

相關問題