@MRcracker

Как центрировать элемент по центру круга?

Есть круг, который сделан на css. Внутри круга расположена иконка fontawesome. Как расположить иконку по центру круга?
  • Вопрос задан
  • 4998 просмотров
Решения вопроса 3
Кругу display: flex; align-items: center; justify-content: center;
Ответ написан
Комментировать
UnluckySerivelha
@UnluckySerivelha
Кругу position: relative, иконке position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
Ответ написан
Комментировать
profesor08
@profesor08 Куратор тега CSS
Если центрировать иконку при помощи position, top, left, transform, то часто будет получаться мыло. Поэтому лучше использовать что-то другое. Можно на флексах как в примере ниже, если размер неизвестен, можно только position, top: 50%, left: 50%, margin: -[пол высоты иконки] 0 0 -[пол ширины иконки], если размер иконки известен.

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: red;
}

.circle .icon {
  line-height: 100%;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы