Выровняйте положение изображения кнопки по CSS - PullRequest
Новая
       25

Выровняйте положение изображения кнопки по CSS

0 голосов
/ 16 февраля 2020

У меня есть кнопка с фоновым изображением и текстом, который больше ширины изображения. Как разместить изображение в середине текста 

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background: url('http://127.0.0.1/pics/item/c1763.png')  no-repeat;
  background-size: 100% 100%;
  border: none;
  color: black;
  font-size: 16px;
  width:60px;
  height:60px;
  padding-top:60px;
  white-space: nowrap;
  background-position: center center;
  display: flex;
}
</style>
</head>
<body>

<button class="button">Button text test</button>

</body>
</html>

Изображение кнопки

Ответы [ 2 ]

0 голосов
/ 16 февраля 2020

Окончательное решение - определить фактическую ширину изображения и указать ширину кнопки для текста 

.button2 {
  background-color: transparent;
  background-image: url('http://127.0.0.1:25005/pics/item/c1763.png');
  background-size: 60px  60px;
  background-repeat: no-repeat;
  border: none;
  font-size: 16px;
  height: 60px;
  width: 150px;
  text-align: center;
  padding-top: 60px;
  white-space:nowrap;
  background-position: center top;
}
0 голосов
/ 16 февраля 2020

Надеюсь, это поможет вам. 

.button {
  background: url('https://i.stack.imgur.com/GxHaN.jpg') no-repeat;
  background-size: 100% 100%;
  border: none;
  color: black;
  font-size: 16px;
  width: 60px;
  height: 60px;
  white-space: nowrap;
  background-position: center center;
  display: flex;
}
<button class="button">Button text test</button>
...