色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

我如何修改圖片到按鈕邊框的中間？

CSS
方一強1年前8瀏覽0評論

我是一個css新手，我在設置一個按鈕上的圖像時遇到了一點問題，我讓它出現在按鈕的中間，就像這樣:

gallery button

下面是我的按鈕代碼的當前狀態

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Protera Survey & Price List</title>
    <link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
        <div class="logo">
            <img src="image/protection2.gif" alt="Protection">
        </div>
            <button class="button"  onclick="location.href='video.php'">
                <img id="gallery-icon" src="image/2023-06-02 12.26.22 - lamborghini.png"><br>
                Gallery
            </button>
            <button class="button" onclick="location.href='Price_List.php'">
                <img id="gallery-icon" src="image/lamborghini-5120x2880-11123.jpeg"><br>
                Price List
            </button>
            <button class="button" onclick="location.href='Survey.php'">
                <img id="gallery-icon" src="image/orange car.png"><br>
                Questionnare
            </button>
</body>
</html>

按鈕的css代碼

.button {
font-family: 'Bebas Neue', sans-serif;
font-size: 40px;
display: inline-block;
padding: 10px `20px;
background-color: rgba(255, 255, 255, .65);
color: black;
display: block;
align-items: center;
width: 100%;
max-width: 300px;
height:15%;
margin: 0 auto 10px;
padding-bottom: 5vh;
padding-top: 4vh;
margin-bottom: 275px;
border-radius: 8px;
border-color: orange;
border-width: 3px;
}

.button img {
  width: 75px;
  border-radius: 50px;
  border-color: orange;
  object-position: top 50px;
}

.button:hover {
background-color: orange;
color: white;
}

.button:hover {
  background-color: orange;
  color: white;
}

我的html和css的結果是這樣的

enter image description here

我試著把襯墊和邊緣放進去。按鈕img，我還試圖給html上的圖像函數提供id，我期望結果是我發送的第一個圖像，但它看起來像是我上次發送的圖像

改變圖像來源，以獲得您的汽車圖像

.button {
font-family: 'Bebas Neue', sans-serif;
font-size: 40px;
display: inline-block;
padding: 10px `20px;
background-color: rgba(255, 255, 255, .65);
color: black;
display: block;
align-items: center;
width: 100%;
max-width: 300px;
height:15%;
margin: 0 auto 10px;
padding-bottom: 5vh;
padding-top: 4vh;
margin-bottom: 275px;
border-radius: 8px;
border-color: orange;
border-width: 3px;
position:relative;
margin-top:100px;
}

.button img {
  width: 75px;
  position:absolute;
  left:50%;
  top:0px;
  transform:translate(-50%,-50%);
}

.button:hover {
background-color: orange;
color: white;
}

.button:hover {
  background-color: orange;
  color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Protera Survey & Price List</title>
    <link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
            <button class="button"  onclick="location.href='video.php'">
                <img id="gallery-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Android_O_Preview_Logo.png/1024px-Android_O_Preview_Logo.png"><br>
                Gallery
            </button>
</body>
</html>