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

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:

1

en lugar de un círculo, obtengo una forma ovalada. Intento jugar con el código para ver cómo puedo hacerlo funcionar.

    JSFiddle

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

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

    Puedes usar css3 flexbox .

    HTML:

     
    Here is some text in circle

    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; } 
     
    Here is some text in circle
    Here is some multi-line text in circle

    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%); } 
     
    Here is an example of some text in my circle.

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

     Hello 

    Por supuesto, debes usar tags 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; } 
    Here a text

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

    Actualizar

    Aquí menos pequeño con algunos cambios

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

    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/

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

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

    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%); } 
     
    Hey
    Big size circle
     .circle { width: 500px; height: 500px; border-radius: 50%; font-size: 50px; color: #fff; line-height: 500px; text-align: center; background: #000 } 
     
    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

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

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

    HTML:

     
    The text

    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

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

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

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