Как сместить кнопку

Question

Сразу скажу, только начал изучать HTML

<a href="tel:89143570021">
    <button img src="images/call.png" alt="" style="width:200px;height:50px" onlick="return false;">
        <center>Связаться</center>
    </button>
</a>

Не работает img src и никак не могу сдвинуть кнопку в право. Помогите пожалуйста

Answer 1

Ну, как минимум, закройте button и откройте img:

<a href="tel:89143570021" style="float: right"><button><img src="https://www.nicepng.com/png/full/7-74287_the-internet-png-internet-png.png" alt="" style="width:50px;height:50px" onlick="return false;"> <center>Связаться</center></button></a>

Answer 2

Судя по всему, вам нужно сделать вот так:

<a href="tel:+79999999999">
    <button>
        <img src="images/call.png" alt="" />
        Связаться
    </button>
</a>

Answer 3

.container {
  display: flex;
}

.phone {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  margin-left: auto; /* прижимаем вправо */
}

.phone__icon {
  max-width: 40px;
  max-width: 40px;
}

<div class="container">
  <a href="tel:+79999999999" class="phone">
    <img class="phone__icon" src="https://www.nicepng.com/png/full/7-74287_the-internet-png-internet-png.png" alt="" />
    <span class="phone__text">Связаться</span>
  </a>
</div>

Answer 4

.phone {
  float: right; /* смещаем кнопку на право */
  border: 1px solid rgb(70, 70, 70);
  padding: 4px;
  border-radius: 4px;
}

.phone__icon {
  width: 40px;
  height: 40px;
  display: block;
  position: relative;
  left: calc(50% - 20px); /* подвинуть на лево на 50% минус половина от ширины элемента */
}

<div class="container">
  <a href="tel:+79999999999" class="phone">
    <img class="phone__icon" src="https://www.nicepng.com/png/full/7-74287_the-internet-png-internet-png.png" alt="" />
    <span class="phone__text">Связаться</span>
  </a>
</div>

БЛОГ НА HUSL

Как сместить кнопку

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