如何在一個邊框或框中添加圖像和按鈕？

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。