Як за допомогою CSS оточити число колом?

Я хотів би оточити число в колі, як на цьому зображенні:

Чи можливо це і як це досягається?

Ось демонстрація на 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, подивіться на стару версію моєї відповіді.

Проблема більшості інших відповідей тут полягає в тому, що вам потрібно налаштувати розмір зовнішнього контейнера таким чином, щоб він був ідеальним розміром на основі розміру шрифту та кількості символів, що відображаються. Якщо ви змішуєте одноцифрові чи чотиризначні числа, це не працюватиме. Якщо співвідношення між розміром шрифту та розміром кола не є ідеальним, ви закінчите овалом або невеликим числом, вертикально вирівняним у верхній частині великого кола. Це має чудово працювати для будь-якої кількості тексту та будь-якого кола розміру. Просто встановіть значення 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 .

Якщо вона 20 і нижче, ви можете просто використовувати символи Unicode ① ② ... ⑳

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

Для розмірів кола, що змінюються залежно від вмісту, це має працювати:

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. Themargin- «s повинен бути скоректований на основі розміру шрифту.

Оновлення для видалення внутрішнього елемента:

<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.

найпростішим способом є використання завантажувального і значка класу

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

Ця версія не спирається на жорстко закодованими, фіксовані значення , але розміри по відношенню до 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>

Для цього можна використовувати радіус кордону:

<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 досі не підтримує закруглені кути.

Моє рішення тут - це легко дозволяє отримати різні розміри, кольори та зв’язки в 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;
}

Не надто складно зрозуміти, як це зробити. Більш важливим є питання, чи можна зробити розміри масштабу кола до змісту.

В даний час я не думаю, що це можливо. Хтось?

Пізно на вечірку, але ось рішення, яке працює лише для мене, це лише завантажувальне рішення. Я використовую 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> (або будь-якого іншого) елемента, і ви закінчите.

Зауважте, що вам може знадобитися коригувати класи маргіналу та прокладки, якщо ваш вміст має більше однієї цифри.

Ви працюєте як зі стандартним блоком, тобто квадратом

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

Це особливість CSS 3, і він не дуже добре підтримується, ви можете точно розраховувати на firefox та сафарі.

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

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;

}

Пізно на вечірку, але ось рішення я пішов з 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>

Не потрібно зайвих робіт. Спасибі Джон Ноель Бруно

Зробіть щось подібне у своєму css

 div {
    ширина: 10ем; висота: 10ем;
    -webkit-border-radius: 5em; -моз-границя-радіус: 5ем;
  }
  p {
    вирівнювання тексту: центр; маржа-верх: 4,5ем;
  }

Використовуйте тег абзацу, щоб написати текст. Сподіваюся, що це допомагає

Щось таке, що я тут зробив, може спрацювати (для чисел від 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>

Удосконалюючи першу відповідь, просто позбудься від прокладки та додай 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;
}

Ось мій спосіб зробити це, використовуючи квадратний метод. догори, це працює з різними значеннями, але вам потрібно 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>

Відповідь тридцяти прав є правильною, але трохи не вистачає моменту. Вам потрібно додати позицію: відносну , якщо ви хочете мати по центру значення в колі та включити також різний діапазон чисел. Наприклад 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>