Как текст разместить по середине кнопки?

Question

Помогите разместить текст по середине изображения. Выглядит вот так -

А хочу чтобы выглядело -

.int_btn {
    color: black;
    border: 0 none;
    background: none;
    font-size: 20px;
    display: flex;
}

        <div class="intro_btn">
            <button class="int_btn"><img src="../Trademine/images/intro/зелёная кнопка.png"             alt="acc">Аккаунты</button>
        </div>

Answer 1

Например таким образом:

.int_btn {
  color: black;
  border: 0 none;
  background: none;
  font-size: 20px;
  display: flex;
  position: relative;
}

.int_btn > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.int_btn > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="intro_btn">
  <button class="int_btn">
    <img width="150" src="//i.imgur.com/x8nHSD2.png" alt="acc">
    <span>Аккаунты</span>
  </button>
</div>

Answer 2

Не знаю сколько у вас кнопок с таким стилям, но если их много и у них разнный текст, то я бы посоветовал не использовать изображение а стиль CSS.
Что-то вот такое:

body{
    display: flex;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
  }

  .btn-block button{
    position: relative;
    border: none;
    background-color: lightgreen;
    padding: 12px 24px;
    cursor: pointer;
  }

  .btn-block button:after,
  .btn-block button:before{
    box-sizing: border-box;
    content: "";
    position: absolute; 
    border: 2px solid lightgreen;
  }

  .btn-block button:after{
    width: calc(100% + 10px);
    height: 100%;
    top: 0;
    left: -5px;
  }

  .btn-block button:before{
    height: calc(100% + 5px);
    width: 100%;
    top: 0;
    left: 0;
  }

<div class="btn-block">
  <button>Аккаунты</button>
</div>

<div class="btn-block">
  <button>Аккаунты Аккаунты</button>
</div>

<div class="btn-block">
  <button>Аккаунты Аккаунты Аккаунты</button>
</div>

<div class="btn-block">
  <button>Аккаунты Аккаунты Аккаунты Аккаунты</button>
</div>

БЛОГ НА HUSL

Как текст разместить по середине кнопки?

Ответы (2 шт):