如何在一个边框或框中添加图像和按钮？

Question

我想在一个框中添加一个图像和一个按钮。

我想要顶部的图片和图片下面的按钮。我希望他们都在一个坚实的边界内。

Answer 1

像这样的东西可能让你开始：

<div id="myBox" style="width:200px;padding:10px;text-align:center;border:2px solid purple;"> 
 
    <img src="http://placekitten.com/100/150" /><br> 
 
    <button>Click Me</button> 
 
</div>

---

需要注意的是，我们通常从HTML代码中分离的样式（style=）：

<style> 
    #myBox {width:200px;padding:10px;text-align:center;border:2px solid purple;} 
</style> 
<div id="myBox"> 
    <img src="http://placekitten.com/100/150" /><br> 
    <button>Click Me</button> 
</div> 

Answer 2

你可以利用下面的代码片段来得到想要的效果（注意：这只是一个样本来说明一个人如何可以在下方添加使用HTML和CSS，单击按钮时的图像和文字，它不会重定向或执行任何操作）：

HTML：

<button class="btn btn-primary tweetButton"> 
    <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png" width="20" height="20" /> 
    <p>Tweet</p> 
</button> 

CSS：

.tweetButton { 
    width: 90px; 
} 

.tweetButton p { 
    margin: 0 0 2px; 
} 

检查出演示here。