css: ¿cómo dibujar un círculo con texto en el medio?

Encontré este ejemplo en stackoverflow:

Dibujar círculo usando CSS solo

Lo cual es genial. ¿Pero me gustaría saber cómo modificar ese ejemplo para poder incluir texto en el medio del círculo?

También encontré esto: centrado vertical y horizontalmente el texto en círculo en CSS (como la insignia de notificación de iPhone)

pero por alguna razón, no funciona para mí. Cuando creo el siguiente código de prueba:

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

en lugar de un círculo, obtengo una forma ovalada. Estoy tratando de jugar con el código para ver cómo puedo hacer que funcione.

JSFiddle

.circle {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 500px;
  text-align: center;
  background: #000
}

<div class="circle">Hello I am A Circle</div>

Si su contenido se va a ajustar y tendrá una altura desconocida, esta es su mejor opción:

http://cssdeck.com/labs/aplvrmue

.badge {
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%; /* may require vendor prefixes */
  background: yellow;
}

.badge {
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: yellow;
}

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

Puedes usar css3 flexbox.

HTML:

<div class="circle-with-text">
    Here is some text in circle
</div>

CSS:

.circle-with-text {
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

Esto le permitirá tener una sola línea vertical y horizontalmente alineada y texto de varias líneas.

body {
  margin: 0;
}
.circles {
  display: flex;
}
.circle-with-text {
  background: linear-gradient(orange, red);
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  margin: 5px 20px;
  font-size: 15px;
  padding: 15px;
  display: flex;
  height: 180px;
  width: 180px;
  color: #fff;
}
.multi-line-text {
  font-size: 20px;
}

<div class="circles">
  <div class="circle-with-text">
    Here is some text in circle
  </div>
  <div class="circle-with-text multi-line-text">
    Here is some multi-line text in circle
  </div>
</div>

¿Creo que quieres escribir texto en un óvalo o círculo? ¿Por qué no este?

<span style="border-radius:50%; border:solid black 1px;padding:5px">Hello</span>

Para un diseño web que me dieron recientemente, tuve que resolver la cantidad de texto centrada y desconocida en un problema de círculo fijo y pensé que compartiría la solución aquí para otras personas que buscan combinaciones de círculo / texto.

El problema principal que tuve fue que el texto a menudo rompía los límites del círculo. Para resolver esto terminé usando 4 divs. Un contenedor rectangular que especifica los límites máximos (fijos) del círculo. Dentro de eso estaría el div que dibuja el círculo con su ancho y altura establecidos al 100%, por lo que cambiar el tamaño del padre cambia el tamaño del círculo real. Dentro de eso habría otro div rectangular que, utilizando% 's, crearía un área de límite de texto que evitaría que el texto abandone el círculo (en su mayor parte). Finalmente, el div real para el texto y el centrado vertical.

Tiene más sentido como código:

/* Main Container -  this controls the size of the circle */
.circle_container
{
	width : 128px;
	height : 128px;
	margin : 0;
	padding : 0;
/*	border : 1px solid red; */
}

/* Circle Main draws the actual circle */
.circle_main
{
	width : 100%;
	height : 100%;
	border-radius : 50%;
	border : 2px solid black;	/* can alter thickness and colour of circle on this line */
	margin : 0;
	padding : 0;
}

/* Circle Text Container - constrains text area to within the circle */
.circle_text_container
{
	/* area constraints */
	width : 70%;
	height : 70%;
	max-width : 70%;
	max-height : 70%;
	margin : 0;
	padding : 0;

	/* some position nudging to center the text area */
	position : relative;
	left : 15%;
	top : 15%;
	
	/* preserve 3d prevents blurring sometimes caused by the text centering in the next class */
	transform-style : preserve-3d;
	
	/*border : 1px solid green;*/
}

/* Circle Text - the appearance of the text within the circle plus vertical centering */
.circle_text
{
	/* change font/size/etc here */
	font: 11px "Tahoma", Arial, Serif;	
	text-align : center;
	
	/* vertical centering technique */
	position : relative;
	top : 50%;
	transform : translateY(-50%);
}

<div class="circle_container">
	<div class="circle_main">
		<div class="circle_text_container">
			<div class = "circle_text">
				Here is an example of some text in my circle.
			</div>
		</div>
	</div>
</div>			

Puede descomentar los colores del borde en los contenedores div para ver cómo se restringe.

Cosas a tener en cuenta: aún puede romper los límites del círculo si coloca demasiado texto o usa palabras / texto ininterrumpido que son demasiado largos. Todavía no es una buena opción para texto completamente desconocido (como la entrada del usuario), pero funciona mejor cuando se sabe vagamente cuál es la mayor cantidad de texto que necesitará almacenar y establecer el tamaño del círculo y los tamaños de fuente en consecuencia. Puede configurar el contenedor de texto div para ocultar cualquier desbordamiento, por supuesto, pero eso puede parecer "roto" y no es un reemplazo para tener en cuenta el tamaño máximo correctamente en su diseño.

¡Espero que sea útil para alguien! HTML / CSS no es mi disciplina principal, así que estoy seguro de que se puede mejorar.

Dibuje un círculo con texto en el medio con etiqueta HTML y sin CSS

HTML con etiqueta SVG para esto. Puedes seguir este enfoque estándar si no quieres utilizar CSS.

 <svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="white" />
     Sorry, your browser does not support inline SVG.
   <text fill="#000000" font-size="18" font-family="Verdana"
     x="15" y="60">ASHISH</text>
 </svg>

Si es solo una línea de texto, puede usar la propiedad de altura de línea, con el mismo valor que la altura del elemento:

height:100px;
line-height:100px;

Si el texto tiene varias líneas, o si el contenido es variable, puede usar el relleno superior:

padding-top:30px;
height:70px;

Ejemplo: http://jsfiddle.net/2GUFL/

Por supuesto, tienes que usar etiquetas para hacer eso. Uno para crear el círculo y otro para el texto.

Aquí un código puede ayudarte

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    color:black;

}
.innerTEXT{
    position:absolute;
    top:80px;
    left:60px;
}

<div id="circle">
    <span class="innerTEXT"> Here a text</span>
</div>

Ejemplo en vivo aquí http://jsbin.com/apumik/1/edit

Actualizar

Aquí menos pequeño con algunos cambios

http://jsbin.com/apumik/3/edit

Para mí, solo esta solución funcionó para texto multilínea:

.circle-multiline {
    display: table-cell;
    height: 200px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: yellow;
}

Si está utilizando Foundation 5 y el marco Compass, puede probar esto.

entrada .sass

$circle-width: rem-calc(25) !default;
$circle-height: $circle-width !default;
$circle-bg: #fff !default;
$circle-radius: 50% !default;
$circle-line-height: $circle-width !default;
$circle-text-align: center !default;

@mixin circle($cw:$circle-width, $ch:$circle-height, $cb:$circle-bg, $clh:$circle-line-height, $cta:$circle-text-align, $cr:$circle-radius) {
    width: $cw;
    height: $ch;
    background: $cb;
    line-height: $clh;
    text-align: $cta;
    @include inline-block;
    @include border-radius($cr);
}

.circle-default {
    @include circle;
}

salida .css

.circle-default {
  width: 1.78571rem;
  height: 1.78571rem;
  background: white;
  line-height: 1.78571rem;
  text-align: center;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

Obtuve esto de la página de YouTube que tiene una configuración realmente simple. Absolutamente mantenible y reutilizable.

.circle {
    position: absolute;
    top: 4px;
    color: white;
    background-color: red;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    line-height: 18px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
    z-index: 999;
}

<div class="circle">2</div>

Algunas de las soluciones aquí no me funcionaron bien en círculos pequeños. Así que hice esta solución usando ol posición absoluta.

El uso de SASS se verá así:

.circle-text {
    position: relative;
    display: block;
    text-align: center;
    border-radius: 50%;
    > .inner-text {
        display: block;
        @extend .center-align;
    }
}

.center-align {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

@mixin circle-text($size) {
    width: $size;
    height: $size;
    @extend .circle-text;
}

Y se puede usar como

#red-circle {
    background-color: red;
    border: 1px solid black;
    @include circle-text(50px);
}

#green-circle {
    background-color: green;
    border: 1px solid black;
    @include circle-text(150px);
}

Ver demostración en https://codepen.io/matheusrufca/project/editor/DnYPMK

Vea el fragmento para ver el CSS de salida

.circle-text {
  position: relative;
  display: block;
  border-radius: 50%;
  text-align: center;
  min-width: 50px;
  min-height: 50px;
}

.center-align {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

<div id="red-circle" class="circle-text">
  <span class="inner-text center-align">Hey</span>
</div>

<div id="green-circle" class="circle-text">
  <span class="inner-text center-align">Big size circle</span>
  <div>
    <style>
      #red-circle {
        background-color: red;
        border: 1px solid black;
        width: 60px;
        height: 60px;
      }
      
      #green-circle {
        background-color: green;
        border: 1px solid black;
        width: 150px;
        height: 150px;
      }
    </style>

Una forma de hacerlo es usar flexbox para alinear el texto en el medio. La forma en que lo encontré es la siguiente:

HTML:

<div class="circle-without-text">
  <div class="text-inside-circle">
    The text
  </div>
</div>

CSS:

.circle-without-text {
    border-radius: 50%;
    width: 70vh;
    height: 70vh;
    background-color: red;
    position: relative;
 }

.text-inside-circle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
 }

Aquí el plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview

El uso de este código también responderá.

<div class="circle">ICON</div>

.circle {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 0;
  padding: 50% 0;
  border-radius: 50%;
  /* Just making it pretty */
  -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
  background: #38a9e4;
  color: white;
  font-family: Helvetica, Arial Black, sans;
  font-size: 48px;
  text-align: center;
}

Estaba combinando algunas respuestas de otras personas y con floaty relativeme dio el resultado que necesitaba.

En HTML uso un div. Lo uso dentro de a lipara una barra de navegación.

.large-list-style {
    float: left;
    position: relative;
    top: -8px;

    border-radius: 50%;

    margin-right: 8px;

    background-color: rgb(34, 198, 200);

    font-size: 18px;
    color: white;
}
    .large-list-style:before,
    .large-list-style:after {
        content: '\200B';
        display:inline-block;
        line-height:0;

        padding-top: 50%;
        padding-bottom: 50%;
    }
    .large-list-style:before {
        padding-left: 16px;
    }
    .large-list-style:after {
        padding-right: 16px;
    }