Como usar CSS para envolver um número com um círculo?

Gostaria de cercar um número em um círculo como nesta imagem:

Isso é possível e como é alcançado?

Aqui está uma demonstração do JSFiddle e um trecho:

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

Minha resposta é um bom ponto de partida, algumas das outras respostas fornecem flexibilidade para diferentes situações. Se você se preocupa com o IE8, veja a versão antiga da minha resposta.

O problema com a maioria das outras respostas aqui é que você precisa ajustar o tamanho do contêiner externo para que ele seja o tamanho perfeito com base no tamanho da fonte e no número de caracteres a serem exibidos. Se você estiver misturando números de 1 e 4 dígitos, não funcionará. Se a proporção entre o tamanho da fonte e o tamanho do círculo não for perfeita, você terminará com um oval ou um pequeno número alinhado verticalmente na parte superior de um círculo grande. Isso deve funcionar bem para qualquer quantidade de texto e qualquer círculo de tamanho. Basta definir o widthe line-heightpara o mesmo valor:

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

Se você precisar aumentar ou diminuir o conteúdo, basta ajustar a largura do contêiner para um melhor ajuste.

Veja no JSFiddle .

Se for 20 ou menos, você pode apenas usar os caracteres unicode ① ② ... ⑳

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

Para tamanhos de círculo que variam com base no conteúdo, isso deve funcionar:

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;
}

Ele se baseia na largura do conteúdo mais os margin-'s para determinar o raio e depois estende a altura para corresponder usando os padding-' s. omargin- itens precisariam ser ajustados com base no tamanho da fonte.

Atualize para remover o elemento interno:

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

Usa pseudo-elementos para forçar a altura. Precisa do espaço com largura zero para alinhamento vertical. Movido line-height:0pxdo externo para o pseudo para que seja pelo menos visível ao degradar para o IE8.

a maneira mais fácil é usar a classe bootstrap e badge

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

Esta versão não depende de valores codificados, fixo, mas tamanhos em relação ao font-sizedo 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>

Você pode usar o raio da borda para isso:

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

Brinque com o raio da borda e os valores de preenchimento até ficar satisfeito com o resultado.

Mas isso não funcionará em todos os navegadores. Eu acho que o IE ainda não suporta cantos arredondados.

Minha solução aqui - isso permite facilmente tamanhos e cores diferentes e vincula um CMS para controle editorial. Para o IE degradando em quadrados.

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;
}

Não é muito difícil ver como fazer isso. A questão maior é se é possível fazer com que as dimensões do círculo sejam dimensionadas para o conteúdo.

Atualmente, acho que não é possível. Qualquer um?

Tarde para a festa, mas aqui está uma solução apenas de inicialização que funcionou para mim. Estou usando o 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>

Você basicamente adiciona bg-dark text-white rounded-circle px-3 py-1 mx-2 h3classes ao seu<span> (ou qualquer outro) elemento e pronto.

Observe que pode ser necessário ajustar as classes de margem e preenchimento se o seu conteúdo tiver mais de um dígito.

Você trabalha como um bloco padrão, que é um quadrado

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

Este é um recurso do CSS 3 e não é muito bem distribuído; você pode contar com o Firefox e o Safari, com certeza.

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

EXEMPLO HTML

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

CÓDIGO

    .numberCircle { 

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

}

Tarde para a festa, mas aqui está a solução que eu fui com 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>

Não é necessário trabalho extra. Obrigado John Noel Bruno

Faça algo assim em seu CSS

 div {
    largura: 10em; altura: 10em;
    -webkit-border-radius: 5em; -moz-border-raio: 5em;
  }
  p {
    alinhamento de texto: centro; margem superior: 4.5em;
  }

Use a tag de parágrafo para escrever o texto. espero que ajude

Algo como o que eu fiz aqui pode funcionar (para os números de 0 a 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>

Para melhorar a primeira resposta, basta se livrar do preenchimento e adicionar line-heighte 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;
}

Aqui está a minha maneira de fazê-lo, usando o método quadrado. A vantagem é que ele funciona com valores diferentes, mas você precisa de 2 extensões.

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

A resposta de trinta pontos é correta, mas está faltando um pequeno argumento. Você precisa adicionar a posição: relativa , se quiser ter um valor centralizado no círculo e incluir também um intervalo diferente de números. Por exemplo 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;
}

mas uma solução mais fácil é usar o Bootstrap

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