Как сделать постоянно круглую рамку на css?

Question

[Timofey Barinov]

Привет!

Что то не получается(

Пока что код такой:

<div class="text-center"><span class="percent">150%</span></div>

.percent{
    display: inline-block;
    font-size: 30px;
    border-radius: 100%;
    padding: 30px 15px;
}

Но если поставить заместо 150% символ вопроса(?) картинка получается такая:

Рамка вокруг текста должна быть всегда круглой и эта вещь должна легко выравниваться по центру..

Заранее благодарен!

Answer 1

[Владислав Бойченко]

codepen.io/anon/pen/OWpodL

Answer 2

[Александр]

круг должен быть вписан в квадрат - тоесть его(border) надо назначать div у которого width=height. span не надо трогать.

Answer 3

[Иван Бабий]

назначать border-radius в px

Answer 4

[Роман Назаркин]

Заколхозил что-то вот такое: https://jsfiddle.net/9cvuL7zc/

Если в двух словах: используя CSS square technique выравниваем высоту элемента по его ширине, затем позиционируем .inner в центре получившегося квадрата.
.ghost-inner нужен потому как обычный .inner имеет абсолютное позиционирование, а значит родительский блок не будет по нему выравниваться.

Из минусов: приходится дублировать текст и есть завязка на CSS transforms.

Answer 5

[Web Developer Blog]

min width задать для блока с текстом, как вариант!