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

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

217 голосов
/ 01 февраля 2011

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

Number in Circle Image

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

Ответы [ 17 ]

393 голосов
/ 01 февраля 2011

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

.numberCircle {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  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 и старше , необходимо загрузить и использовать CSS3 PIE . Моя демонстрация выше не будет работать в IE8, но это только потому, что jsFiddle не содержит PIE.htc.

91 голосов
/ 27 октября 2013

Проблема с большинством других ответов здесь заключается в том, что вам нужно настроить размер внешнего контейнера так, чтобы он был идеальным размером в зависимости от размера шрифта и количества отображаемых символов.Если вы смешиваете однозначные и четырехзначные числа, это не сработает.Если соотношение между размером шрифта и размером круга не является идеальным, вы получите либо овал, либо небольшое число, выровненное по вертикали в верхней части большого круга.Это должно хорошо работать для любого количества текста и любого размера круга.Просто установите 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 .

49 голосов
/ 24 августа 2012

Если это 20 и ниже, вы можете просто использовать символы Юникода ① ② ... ⑳

http://www.alanwood.net/unicode/enclosed_alphanumerics.html

37 голосов
/ 15 сентября 2015

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

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- для определения радиуса, а затем увеличивает высоту до соответствия с помощью padding-. 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.

20 голосов
/ 18 сентября 2016

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

 <span class="badge">1</span>
14 голосов
/ 08 ноября 2016

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

http://jsfiddle.net/qod1vstv/

enter image description here

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>
8 голосов
/ 01 февраля 2011

Вы можете использовать для этого радиус границы: 

<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 все еще не поддерживает закругленные углы.

4 голосов
/ 12 сентября 2012

Мое решение здесь - это легко учитывает различные размеры и цвета и связывает 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;
}

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

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

2 голосов
/ 01 февраля 2011

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

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

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

<div class="circle"><span>1234</span></div>
1 голос
/ 01 февраля 2011

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

 div {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    text-align: center; margin-top: 4.5em;
  }

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

Страница:
...