CSS如何在图像下方添加按钮[关闭]答案

【问题标题】：CSS How to add a button below an image [closed]CSS如何在图像下方添加按钮[关闭]
【发布时间】：2016-03-31 05:42:47
【问题描述】：

我在网上搜索过，但找不到答案。

我想在表格中的几张图片下方放置按钮，如下所示：

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

我尝试使用换行符（就像这里建议的那样：How can I set button below image?），但它不起作用。按钮会被奇怪地放置。

将它们相对于图像定位会很好，因为它们应该始终位于它们下方。

感谢任何帮助。

【问题讨论】：

标签： html css image button

【解决方案1】：

如果你想添加按钮 + 使它们的图像宽度相同添加到 JS 小提琴 Adel 建议

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

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

【讨论】：

【解决方案2】：

这是一个例子https://jsfiddle.net/1dw55eu7/1/

只需将您的图像包装在一个 div 中，将您的按钮包装在另一个 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>

【讨论】：

谢谢，这也很好用。我认为这是一种比将按钮放入 figcaption 更好的编码风格。