Как использовать CSS, чтобы окружить число кружком?


250

Я хотел бы окружить число в круг, как на этом изображении:

Число в круговом изображении

Возможно ли это и как это достигается?

Ответы:


442

Вот демонстрация JSFiddle и фрагмент:

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}
<div class="numberCircle">30</div>

Мой ответ является хорошей отправной точкой, некоторые другие ответы обеспечивают гибкость в различных ситуациях. Если вам небезразличен IE8, посмотрите старую версию моего ответа.


Текущая последняя версия Internet Explorer 9 на самом деле поддерживает border-radius. ... и div не лучший выбор для этого. :)
reisio

7
дисплей: встроенный блок;
Киркланд

1
@KyleMit: теоретически это хорошая идея. К сожалению, CSS3 PIE имеет ограничение того же домена .
тридцать пятого

3
Чтобы избежать необходимости выполнять математику в CSS всякий раз, когда вы меняете размер шрифта (например, хлопот, если вы делаете адаптивный дизайн), вы можете использовать эту адаптацию jsfiddle из тридцати точек, которая использует только пиксели для описания font-size: jsfiddle. net / dQR9T / 7058
Стивен

1
@ Стивен, как убедиться, что круг всегда находится вокруг числа , или мы можем сделать круг больше, если число 24928, оно переполняется прямо сейчас
трансформатор

108

Проблема с большинством других ответов здесь заключается в том, что вам нужно настроить размер внешнего контейнера так, чтобы он был идеальным размером в зависимости от размера шрифта и количества отображаемых символов. Если вы смешиваете однозначные и четырехзначные числа, это не сработает. Если соотношение между размером шрифта и размером круга не является идеальным, вы получите либо овал, либо небольшое число, вертикально выровненное в верхней части большого круга. Это должно хорошо работать для любого количества текста и любого размера круга. Просто установите widthи line-heightто же значение:

.numberCircle {
    width: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    border: 2px solid #666;
}
<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>

Если вам нужно сделать контент длиннее или короче, все, что вам нужно сделать, это отрегулировать ширину контейнера для лучшего соответствия.

Смотрите это на JSFiddle .


Это именно та проблема, с которой я столкнулся, показывая процент внутри, который может быть «1», «10» или «100». Это прекрасно работает, спасибо!
Фелипе Кастро

Обратите внимание, что это предложенное редактирование было отклонено, но изменения фактически центрируют текст немного лучше по вертикали, поэтому я добавил их в ответ вручную.
Майк

Это лучший ответ. Я бы использовал translateY (-50%) вместо отрицательной верхней маржи
Тобиас

@Tobias Спасибо за отличную идею. Я обновил свой ответ.
Майк

Было бы намного чище удалить span и добавить text-alignи line-heightк div. Все еще лучший ответ, вероятно.
Dlsso


41

Для размеров круга, варьирующихся в зависимости от содержания, это должно работать:

http://jsfiddle.net/nzsnw55s/

<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>

.numberCircle {
  display:inline-block;
  line-height:0px;

  border-radius:50%;
  border:2px solid;

  font-size:32px;
}

.numberCircle span {
  display:inline-block;

  padding-top:50%;
  padding-bottom:50%;

  margin-left:8px;
  margin-right:8px;
}

Он полагается на ширину содержимого плюс margin-'s', чтобы определить радиус, а затем увеличивает высоту, чтобы соответствовать padding-'s. Это margin-должно быть скорректировано в зависимости от размера шрифта.

Обновление для удаления внутреннего элемента:

<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>

<style type="text/css">
.numberCircle {
    display:inline-block;

    border-radius:50%;
    border:2px solid;

    font-size:32px;
}

.numberCircle:before,
.numberCircle:after {
    content:'\200B';
    display:inline-block;
    line-height:0px;

    padding-top:50%;
    padding-bottom:50%;
}

.numberCircle:before {
    padding-left:8px;
}
.numberCircle:after {
    padding-right:8px;
}
</style>

Использует псевдо-элементы для увеличения высоты. Нужно пространство нулевой ширины для вертикального выравнивания. Перемещен line-height:0pxиз внешнего в псевдо, чтобы он был хотя бы видим при деградации для IE8.


5
Для меня это было лучшее решение. Это позволяет большие числа, и является наиболее масштабируемым. Все остальные решения имеют слишком жесткое кодирование размеров. Это имеет наименьшее. Размер шрифта можно изменить на значительную сумму, не нарушая этого. Если резко изменить, маржа должна быть скорректирована, но это очень щадящий. Однако необходимость использовать вложенный элемент является чем-то негативным.
Necreaux

@Necreaux Обновил ответ с версией, которая заменяет явный внутренний элемент псевдоэлементами.
ryachza

1
Лучшее решение действительно. Я просто заменил поля margin-left и margin-right на 0.35em вместо 8px (заполнение в обновленном решении). Так что вы можете изменить размер шрифта и сохранить подходящее поле.
Джибато

25

Самый простой способ - использовать класс начальной загрузки и значок

 <span class="badge">1</span>

4
Это круто! Я уже использую бутстрап, просто я не знал, что этот класс существует.
Джастин

1
Хороший ответ навидь!
SeyedPooya Soofbaf

22

Эта версия не опирается на жестко закодированными, фиксированные значения , но размеры по отношению к font-sizeизdiv .

http://jsfiddle.net/qod1vstv/

введите описание изображения здесь

CSS:

.numberCircle {
    font: 32px Arial, sans-serif;

    width: 2em;
    height: 2em;
    box-sizing: initial;

    background: #fff;
    border: 0.1em solid #666;
    color: #666;
    text-align: center;
    border-radius: 50%;    

    line-height: 2em;
    box-sizing: content-box;   
}

HTML:

<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>

1
Привет, это очень хорошо, но если число большое, даже в сотнях или тысячах, оно выходит за пределы круга. Также можно ли будет использовать размер шрифта для создания нового цвета фона
трансформер

1
Прекрасное решение!
Джомофродо

8

Вы можете использовать border-radius для этого:

<html>
  <head>
    <style type="text/css">

    .round
    {
        -moz-border-radius: 15px;
        border-radius: 15px;
        padding: 5px;
        border: 1px solid #000;
    }

  </style>
  </head>  
  <body>   
    <span class="round">30</span>
  </body>
</html>  

Поиграйте с радиусом границы и значениями заполнения, пока вы не будете удовлетворены результатом.

Но это не будет работать во всех браузерах. Я думаю, что IE до сих пор не поддерживает закругленные углы.


не забывайте `-webkit-border-radius: 15px;` также есть исправление для IE htmlremix.com/css/curved-corner-border-radius-cross-browser, но дважды подумайте о его реализации
Ханнес

+1, наверное, самый простой способ ... запасной вариант для IE тоже выглядит нормально (квадрат). WordPress делает это так, если я помню
Росс

4

Мое решение здесь - это легко учитывает различные размеры и цвета и связывает в CMS для редакционного контроля. Для IE разложение на квадраты.

HTML :

<div class="circular-label label-outer label-size-large label-color-pink">
    <div class="label-inner"> 
        <span>Fashion & Beauty</span>
    </div>
</div>

CSS :

.circular-label {
    overflow: hidden;
    z-index: 100;
    vertical-align: middle;
    font-size: 11px;
    -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
    width: 85%;
    height: 85%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px dotted white;
    vertical-align: middle;
    margin: auto;
    top: 5%;
    position: relative;
    overflow: hidden;
}
.label-inner > span {
    display: table;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    position: absolute;
    margin: auto;
    margin-top: 38%;
    font-family:'ProximaNovaLtSemibold';
    font-size: 13px;
    line-height: 1.0em;
}
.circular-label.label-size-large {
    width: 110px;
    height: 110px;
    -moz-border-radius: 55px;
    -webkit-border-radius: 55px;
    border-radius: 55px;
    margin-top:-55px;
}
.circular-label.label-size-med {
    width: 76px;
    height: 76px;
    -moz-border-radius: 38px;
    -webkit-border-radius: 38px;
    border-radius: 38px;
    margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
    margin-top: 33%;
}
.circular-label.label-size-small {
    width: 66px;
    height: 66px;
    -moz-border-radius: 33px;
    -webkit-border-radius: 33px;
    border-radius: 33px;
    margin-top:-33px;
}

Нетрудно понять, как это сделать. Больший вопрос заключается в том, можно ли сделать размеры круга масштабируемыми до содержания.

В настоящее время я не думаю, что это возможно. Кто угодно?


3

Поздно на вечеринку, но вот решение только для начальной загрузки, которое сработало для меня. Я использую Bootstrap 4:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>

Вы в основном добавляете bg-dark text-white rounded-circle px-3 py-1 mx-2 h3классы к своему <span>(или какому-либо другому) элементу, и все готово.

Обратите внимание, что вам может потребоваться настроить поля margin и padding, если ваш контент содержит более одной цифры.


2

Вы работаете как со стандартным блоком, то есть квадрат

.circle {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }

Это особенность CSS 3, и она не очень хорошо поддерживается, вы точно можете рассчитывать на Firefox и Safari.

<div class="circle"><span>1234</span></div>

2

Пример HTML

<h3><span class="numberCircle">1</span> Regiones del Interior</h3>

КОД

    .numberCircle { 

    border-radius:50%;
    width:40px;
    height:40px;
    display:block;
    float:left;
    border:2px solid #000000;
    color:#000000;
    text-align:center;
    margin-right:5px;

}

Хотя этот код полезен, было бы неплохо дать некоторые пояснения
mhatch

2

Поздно на вечеринку, но вот решение, с которым я пошел https://codepen.io/jnbruno/pen/vNpPpW

Css:

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

HTML:

<div class="panel-body">
                            <h4>Normal Circle Buttons</h4>
                            <button type="button" class="btn btn-default btn-circle"><i class="fa fa-check"></i>
                            </button>
                            <button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i>
                            </button>
</div>

Требуется без дополнительной работы. Спасибо Джон Ноэль Бруно


Кто такой Джон Ноэль Бруно? Если получить его из блога или учебника, предоставление ссылок будет плюсом
Dush

1

Сделайте что-то подобное в вашем CSS

 div {
    ширина: 10em; высота: 10em;
    -webkit-border-radius: 5em; -моз-граница-радиус: 5em;
  }
  п {
    выравнивание текста: по центру; маржинальная вершина: 4.5em;
  }

Используйте тег абзаца, чтобы написать текст. надеюсь, это поможет


1

Может сработать что-то вроде того, что я здесь сделал (для чисел от 0 до 99):

CSS:

.circle {
    border: 0.1em solid grey;
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
}

.circle p {
    margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    color: grey;
}

HTML:

<body>
    <div class="circle"><p>30</p></div>
</body>

1

Улучшение первого ответа просто избавиться от дополнения и дополнения line-heightи vertical-align:

.numberCircle {
   border-radius: 50%;       

   width: 36px;
   height: 36px;
   line-height: 36px;
   vertical-align:middle;

   background: #fff;
   border: 2px solid #666;
   color: #666;

   text-align: center;
   font: 32px Arial, sans-serif;
}

1

Вот мой способ сделать это, используя квадратный метод. плюс это работает с разными значениями, но вам нужно 2 пролета.

.circle {
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  padding: 5px;
}
.circle::after {
  content: '';
  display: block;
  padding-bottom: 100%;
  height: 0;
  opacity: 0;
}
.num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.width_holder {
  display: block;
  height: 0;
  overflow: hidden;
}
<div class="circle">
  <span class="width_holder">1</span>
  <span class="num">1</span>
</div>
<div class="circle">
  <span class="width_holder">11</span>
  <span class="num">11</span>
</div>
<div class="circle">
  <span class="width_holder">11111</span>
  <span class="num">11111</span>
</div>
<div class="circle">
  <span class="width_holder">11111111</span>
  <span class="num">11111111</span>
</div>


0

Ответ Тридцати является правильным, но в нем не хватает небольшого смысла. Вам нужно добавить position: относительный , если вы хотите, чтобы центрированное значение было в круге, а также включать другой диапазон чисел. Например 123;

HTML:

<div class="numberCircle">30</div>

CSS:

.numberCircle {    

border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;

font: 32px Arial, sans-serif;
}

но самое простое решение - использовать Bootstrap

<span class="badge" style ="float:right">123</span>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.