0

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

введите сюда описание изображения

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

.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>

введите сюда описание изображения

2
  • Можно ссылку где вы брали данную фото?
    – Miha
    23 фев 2022 в 10:15
  • Я сам сделал. В фотошопе.
    – Стоми
    23 фев 2022 в 10:19

2 ответа 2

4

Не знаю сколько у вас кнопок с таким стилям, но если их много и у них разнный текст, то я бы посоветовал не использовать изображение а стиль 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>

2

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

.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>

3
  • Добрый день @De.Minov, у меня такой вопросик, как вы скрываете код? ^-^
    – Miha
    23 фев 2022 в 11:03
  • @ПростаMiha, добрый, в редактирование сниппета (скрин), либо вручную у параметра hide заменить значение на true (скрин)
    – De.Minov
    23 фев 2022 в 11:09
  • 1
    большое спасибо
    – Miha
    23 фев 2022 в 11:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.