porcentaje - CSS: ¿cómo dibujar un círculo con texto en el medio?

css circulo con texto

Question

Encontré este ejemplo en stackoverflow:

Dibuja un 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: centrar 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. Intento jugar con el código para ver cómo puedo hacerlo funcionar.

Answer 1

Algunas de las soluciones aquí no me funcionaron bien en círculos pequeños. Así que hice esta solución usando la 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);
}

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

Ver el fragmento para ver el resultado CSS

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

Answer 2

Combinaba algunas respuestas de otras personas y con float y relative me dio el resultado que necesitaba.

En HTML utilizo un div. Lo uso dentro de un li para 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;
}

Answer 3

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

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

Answer 4

Para mí, solo esta solución funcionó para el texto de líneas múltiples:

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

Answer 5

Para un diseño web me dieron recientemente que tenía 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 combos 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 ese sería el div que dibuja el círculo con su ancho y altura establecidos en 100%, por lo que al cambiar el tamaño del elemento principal se cambia el tamaño del círculo real. Dentro de eso habría otro div rectangular que, usando% ''s, crearía un área de límite de texto que evitaría que cualquier texto saliera del círculo (en su mayor parte). Entonces, 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 de borde en los divisores de contenedor para ver cómo se constriñe.

Cosas a tener en cuenta: aún puede romper los límites del círculo si pone demasiado texto o usa palabras / texto intacto 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 sabes vagamente la cantidad de texto que necesitarás almacenar y configura el tamaño del círculo y el tamaño de las fuentes en consecuencia. Puede configurar el div contenedor de texto para ocultar cualquier desbordamiento, por supuesto, pero que puede parecer "roto" y no es un reemplazo para realmente 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!

Answer 6

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

Aquí algunos códigos pueden 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

Answer 7

Puedes usar css3 flexbox .

HTML:

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

CSS:

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

Esto le permitirá tener texto de líneas simples y multilíneas alineado vertical y horizontalmente en sentido vertical y horizontal.

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>

Answer 8

Si está utilizando Foundation 5 y Compass framework, puede intentarlo.

.sass input

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

Answer 9

Si solo se trata de 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/

Answer 10

Si su contenido se va a envolver y es de 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>

Answer 11

Tengo esto de la página de YouTube que tiene una configuración muy 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>

Answer 12

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

Answer 13

Usando este código también será receptivo.

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

Answer 14

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>

Answer 15

.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 CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A Circle</div>