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


156

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.

Respuestas:


328

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>


8
@dot: Realmente no es mi trabajo - bryanhadaway.com/how-to-create-circles-with-css
Jawad

3
Si puede hacer border-radius:50%;que su evento de código sea más elegante y portátil, sin tener que cambiar este atributo cada vez en función del ancho y la altura;)
bonCodigo

14
Personalmente, eliminaría el atributo line-height y agregaría vertical-align: middle; display: table-cell; De esa manera, sus líneas de texto seguirán centradas. jsfiddle.net/z9bLtw99
ministe2003

3
¿Qué pasa con varias líneas?
Henry Zhu

1
@DamjanPavlica Consulte la última actualización de esta respuesta que no establece explícitamente ningún ancho o alto. También funciona para varias líneas, ya que puede verificar en vivo en jsfiddle
Jose Rui Santos

57

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


66
Esto genera óvalos, no círculos perfectos.
Sophivorus

2
Esta es la verdadera solución. aunque debo mencionar, eso display: absoluterompe la alineación, pero la solución fácil es envolverlo dentro de otro div.
Ondřej Želazko

1
produce un círculo perfecto (no un óvalo). También una envoltura div es una buena idea cuando se usa posicionamiento absoluto o fijo.
krivar

2
Para un posicionamiento absoluto, usaría un contenedor. Pero da un óvalo, ya que el ancho máximo al que puede llegar es de 180 px. Entonces, si especifica min-width al ancho que desea y establece la altura a ese valor también. Obtendrás un círculo. De lo contrario, obtendrá un óvalo más allá del ancho y la altura> 180 px.
mutp

27

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.


1
La mejor solución en un mundo ideal. Lamentablemente, quedan muchos errores entre navegadores en la implementación de flexbox: github.com/philipwalton/flexbugs
jimiayler

para IE: `` `display: -ms-flexbox` ``
Michael Guild

11

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


8

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.


8

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>

ingrese la descripción de la imagen aquí


Para futuras referencias para los lectores casuales: Como se muestra en el código y la imagen, el texto se centra sólo porque el font-size, font-family, x, y la yalineación. Para cualquiera que no tenga Verdana instalado, no estará centrado. El uso x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"tampoco resuelve el problema.
LosManos

6

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/


6

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


¡Gracias! Entiendo su ejemplo mejor que el que se encuentra en la publicación ( stackoverflow.com/questions/4801181/… ) pero me gustaría entender por qué ese ejemplo no funciona para mí ...
punto

parece que han hecho lo mismo que tú, pero ¿se combinaron en una sola clase en el CSS ...?
punto

Sí, acabo de notar que hice lo mismo.
Ligth

Dé un segundo, actualizaré mi publicación y mi código para mejorarla: D
Ligth

3

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

3

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

2

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>


2

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


0

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


0

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

0

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


Esta es una copia directa de otra respuesta. Vergüenza. -1
Tim Gautier

0

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;
    }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.