在網頁開發中，圖片放在按鈕中可以使網頁看起來更加美觀，同時也可以提高頁面的交互性。下面我們來看看如何使用CSS將圖片放在按鈕中：
/* HTML代碼 *//* CSS代碼 */
.btn {
position: relative; /* 設置按鈕為相對定位 */
display: inline-block;
padding: 10px 15px;
background-color: #007bff; /* 根據需求設置按鈕樣式 */
color: #fff;
border: none;
border-radius: 5px;
}
.btn img {
position: absolute; /* 設置圖片為絕對定位 */
left: 10px; /* 根據需求設置圖片位置 */
top: 50%;
transform: translateY(-50%); /* 讓圖片在垂直方向上居中 */
}在上面的代碼中，我們首先在HTML中使用了button標簽來創建按鈕，并在其中嵌套了一個img標簽來放置圖標。在CSS中，我們設置了按鈕為相對定位，并且將圖標設置為絕對定位。這樣，我們就可以通過left和top屬性分別設置圖標在按鈕中的位置。
另外，我們還使用了transform屬性來將圖標在垂直方向上居中。這里的translateY(-50%)表示在Y軸方向上向上移動50%的圖標高度，因此可以使圖標在垂直方向上居中。
值得注意的是，如果按鈕和圖標的尺寸不同，可能會出現圖標被截斷的情況。此時，我們可以通過設置按鈕的overflow為visible來解決這個問題。
通過以上的示例，相信大家已經學會了如何使用CSS將圖片放在按鈕中，這樣可以讓網頁看起來更加美觀，同時也可以提高頁面的交互性。希望對大家有所幫助！
上一篇css圖片文字效果