как сделать иконку возле текста

Question

Я хочу сделать так, чтобы текст остался по центру, а иконка прилипала к этому тексту слева

Вот что я написал

.Physics {
  text-decoration: none;
  font-size: 3em;
  text-align: center;
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #c5d0e6;
}

.pen_icon {
  padding-bottom: 10px;
  float: left;
  padding-left: 20px;
  width: 50px;
  height: auto;
}

<a href="" class="Physics"><img src="pen.png" class="pen_icon">Физика</a>

Answer 1

Изначально подход не верный, т.к. вы использовать float.

Для данной задачи подойдёт Flexbox.

.Physics {
  text-decoration: none;
  font-size: 3em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #c5d0e6;
}

.pen_icon {
  width: 50px;
  height: auto;
}

<a href="#" class="Physics">
  <img src="https://i.imgur.com/n6YcMi9.png" class="pen_icon">
  <span>Физика</span>
</a>

БЛОГ НА HUSL

как сделать иконку возле текста

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