对齐按钮图像内的文本和图像

问题描述 投票:0回答:1

到 CSS 。我在按钮图像内有一个按钮图像,txt 应位于左侧,另一个图像应位于右侧。我所做的一切都在中心。有人可以帮助我吗?谢谢..

这是代码:

button {
  /* padding-top: 100px; */
  width: 100%;
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://www.searchpng.com/wp-content/uploads/2019/01/Game-Button-PNG-copy.jpg");
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
</head>

<body>
  <button type="button">
          <span>test</span>
          <img
            src="https://cdn.iconscout.com/icon/free/png-256/metamask-2728406-2261817.png" width="60"
          />
        </button>
</body>

</html>

html css
1个回答
1
投票

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      button {
        /* padding-top: 100px; */
        width: 100%;
        border: none;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url("https://www.searchpng.com/wp-content/uploads/2019/01/Game-Button-PNG-copy.jpg");
        height: 100%;
        max-width: 1400px;
    margin: 0 auto;
    position: relative;
      }
     button span {
    text-align: left;
    position: absolute;
    left: 20%;
    color: white;
    top: 29px;
}
button img{position: relative;
    right: -28%;}
    </style>
  </head>
  <body>
        <button type="button">
          <span>test</span>
          <img
            src="https://cdn.iconscout.com/icon/free/png-256/metamask-2728406-2261817.png"
            width="60"
          />
        </button>
    
  </body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.