¿Cómo usar CSS para rodear un número con un círculo?

Me gustaría rodear un número en un círculo como en esta imagen:

¿Es esto posible y cómo se logra?

Aquí hay una demostración en JSFiddle y un fragmento:

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

Mi respuesta es un buen punto de partida, algunas de las otras respuestas brindan flexibilidad para diferentes situaciones. Si te interesa IE8, mira la versión anterior de mi respuesta.

El problema con la mayoría de las otras respuestas aquí es que necesita ajustar el tamaño del contenedor externo para que sea el tamaño perfecto en función del tamaño de fuente y el número de caracteres que se mostrarán. Si está mezclando números de 1 dígito y números de 4 dígitos, no funcionará. Si la relación entre el tamaño de fuente y el tamaño del círculo no es perfecta, terminará con un óvalo o un pequeño número alineado verticalmente en la parte superior de un círculo grande. Esto debería funcionar bien para cualquier cantidad de texto y cualquier círculo de tamaño. Simplemente configure el widthy line-heightal mismo 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>

Si necesita hacer que el contenido sea más largo o más corto, todo lo que necesita hacer es ajustar el ancho del contenedor para un mejor ajuste.

Véalo en JSFiddle .

Si tiene 20 o menos, puede usar los caracteres unicode ① ② ... ⑳

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

Para los tamaños de círculo que varían según el contenido, esto debería 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;
}

Se basa en el ancho del contenido más los margin-'s para determinar el radio, luego extiende la altura para que coincida con los padding-' s. Los margin-'s tendrían que ajustarse en función del tamaño de fuente.

Actualización para eliminar el 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>

Utiliza pseudoelementos para forzar la altura. Necesita el espacio de ancho cero para la alineación vertical. Se movió line-height:0pxdesde el exterior al pseudo para que sea al menos visible cuando se degrada para IE8.

la forma más fácil es usar bootstrap y la clase de insignia

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

Esta versión no se basa en valores fijos codificados, sino en tamaños relativos a los font-sizede 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>

Puede usar el radio del borde para esto:

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

Juega con el radio del borde y los valores de relleno hasta que estés satisfecho con el resultado.

Pero esto no funcionará en todos los navegadores. Supongo que IE todavía no admite esquinas redondeadas.

Mi solución aquí: esto permite fácilmente diferentes tamaños y colores y se une a un CMS para el control editorial. Para IE degradando a cuadrados.

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

No es demasiado difícil ver cómo hacer esto. La pregunta más importante es si es posible hacer que las dimensiones del círculo escalen al contenido.

Actualmente no creo que sea posible. ¿Nadie?

Tarde a la fiesta, pero aquí hay una solución de arranque que me ha funcionado. Estoy usando 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>

Básicamente agrega bg-dark text-white rounded-circle px-3 py-1 mx-2 h3clases a su elemento <span>(o lo que sea) y ya está.

Tenga en cuenta que es posible que deba ajustar las clases de margen y relleno si su contenido tiene más de un dígito.

Trabajas como con un bloque estándar, que es un cuadrado

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

Esta es una característica de CSS 3 y no está muy bien soportada, puede contar con Firefox y Safari con seguridad.

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

EJEMPLO 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 a la fiesta, pero aquí está la solución que elegí con 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>

No requiere trabajo extra. Gracias John Noel Bruno

Haz algo como esto en tu CSS

 div {
    ancho: 10em; altura: 10em;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  pags {
    alinear texto: centro; margen superior: 4.5em;
  }

Usa la etiqueta de párrafo para escribir el texto. Espero que ayude

Algo como lo que he hecho aquí podría funcionar (para los números del 0 al 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>

Mejorando la primera respuesta, simplemente elimine el relleno y agregue line-heighty 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;
}

Aquí está mi forma de hacerlo, utilizando el método cuadrado. Lo bueno es que funciona con diferentes valores, pero necesita 2 tramos.

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

La respuesta de thirtydot es correcta pero le falta un pequeño punto. Debe agregar posición: relativa , si desea tener un valor centrado en el círculo e incluir también un rango diferente de números. Por ejemplo 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;
}

pero una solución más fácil es usar Bootstrap

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