Question

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

我想把按钮放在桌子上的几张图片下面，如下所示：

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

我尝试使用换行符（如此处建议：How can I set button below image?），但它没有用。按钮会被奇怪地放置。

将它们放在相对于图像的位置会很好，因为它们应始终位于图像下方。

感谢任何帮助。

Answer 1

这是一个例子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>

Answer 2

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

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

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

CSS如何在图像下添加按钮

2 个答案: