如何使用html和css對齊按鈕內的圖像？

-2

#button { 
 
    background-color: rgb(211, 72, 54); /*i have aligned the text inside 
 
    the button but also need align the logo google+*/ 
 
    width: 35%; 
 
    height: 6%; 
 
    text-align: center; 
 
    color: white; 
 
    background-repeat: no-repeat; 
 
    margin-left: 3%; 
 
}

<input id="button" type="button" value="Continue with Google" name="google" background-image: url(gmaillogo.png)>

我希望留在按鈕對齊，垂直居中。

來源

2017-08-31 T SUDHISH NAIR

您沒有正確使用背景圖片。你應該在你的CSS中使用它，如下所示：

此外，你有background-size（包含在這種情況下會使圖像適合父）和background-position，它可以像素，百分比或關鍵字指定像左中心等。goinf

#button { 
 
    background-color: rgb(211, 72, 54); /*i have aligned the text inside 
 
    the button but also need align the logo google+*/ 
 
    width: 35%; 
 
    height: 6%; 
 
    text-align: center; 
 
    color: white; 
 
    background-repeat: no-repeat; 
 
    background-position: left center; 
 
    margin-left: 3%; 
 
    background-size:contain; 
 
    background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFRki9RQJ1DJtL6gmwfWrTK4d3D6ozcPRHnryqQlY75_nwtCcdVPRSFw"); 
 
}

<input id="button" type="button" value="Continue with Google" name="google" background-image: url(")>

來源

2017-08-31 12:26:21

#button { 
 
    background-color: rgb(211, 72, 54); 
 
    /*i have aligned the text inside 
 
    the button but also need align the logo google+*/ 
 
    width: 35%; 
 
    height: 6%; 
 
    text-align: center; 
 
    color: white; 
 
    background-repeat: no-repeat; 
 
    margin-left: 3%; 
 
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFRki9RQJ1DJtL6gmwfWrTK4d3D6ozcPRHnryqQlY75_nwtCcdVPRSFw); 
 
    background-position: left center; 
 
    background-size: contain; 
 
}

<input id="button" type="button" value="Continue with Google" name="google" />

來源

2017-08-31 12:35:18 anu

如何使用html和css對齊按鈕內的圖像？

回答

相關問題