twofolls95
@twofolls95

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

Всем привет! Нужно реализовать красный круг в центре которого будет находиться цифра. Получилось реализовать с помощью псевдокласса ::after, позиционирование с помощью absolute, но это не то, так как от изменения размера экрана красный круг начинает смещаться. Как еще можно спозиционировать красный круг, чтобы при изменении размера экрана он никуда не сдвигался?

Код:
https://jsfiddle.net/suva6ko5/
  • Вопрос задан
  • 103 просмотра
Решения вопроса 2
dom1n1k
@dom1n1k
Внимание, вопрос: зачем тут изгаляться с псевдоэлементами, если можно (и нужно!) скруглить и стилизовать сам элемент?
Ответ написан
uiworks
@uiworks
https://jsfiddle.net/L0hnedgs/
<div class="circle">
  <span class="circle__number">
    1
  </span>
</div>

.circle {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle__number {
  color: #fff;
  font-size: 70px;
  font-weight: bold;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
twofolls95
@twofolls95 Автор вопроса
Всем огромное спасибо за ответы!
Вот как я решил:
https://jsfiddle.net/dL8t9evs/
Ответ написан
Ваш ответ на вопрос

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

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