css: como desenhar o círculo com o texto no meio?

Eu encontrei este exemplo no stackoverflow:

Desenhe Círculo usando css sozinho

O que é ótimo. Mas gostaria de saber como modificar esse exemplo para que eu possa include texto no meio do círculo?

Eu também achei isso: centralização vertical e horizontal do texto em círculo em CSS (como o distintivo de notificação do iPhone)

mas por algum motivo, não funciona para mim. Quando eu crio o seguinte código de teste:

1

em vez de um círculo, eu tenho uma forma oval. Estou tentando brincar com o código para ver como posso fazê-lo 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

Se o seu conteúdo vai ser embrulhado e de altura desconhecida, esta é a sua melhor aposta:

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

Você pode usar o 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; } 

Isso permitirá que você tenha verticalmente e horizontalmente alinhado de linha única e texto de várias linhas.

 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 um web design que recebi recentemente, tive que resolver a quantidade de texto centralizada e desconhecida em um problema de círculo fixo e pensei em compartilhar a solução aqui para outras pessoas que pesquisam em combinações de círculo / texto.

O principal problema que tive foi o texto, muitas vezes, quebrar os limites do círculo. Para resolver isso acabei usando 4 divs. Um contêiner retangular que especificou os limites máximos (fixos) do círculo. Por dentro, seria o div que desenha o círculo com largura e altura configuradas como 100%, portanto, alterar o tamanho do pai altera o tamanho do círculo real. Dentro, seria uma outra div retangular que, usando% ‘s, criaria uma área de limite de texto evitando que qualquer texto saísse do círculo (em sua maior parte). Então, finalmente, a div real para o texto e centralização vertical.

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

Eu acho que você quer escrever texto em um oval ou círculo? porque não este?

 Hello 

Claro, você tem que usar tags para fazer isso. Um para criar o círculo e outro para o texto.

Aqui, alguns códigos podem ajudá-lo

 #circle { background: #f00; width: 200px; height: 200px; border-radius: 50%; color:black; } .innerTEXT{ position:absolute; top:80px; left:60px; } 
Here a text

Exemplo ao vivo aqui http://jsbin.com/apumik/1/edit

Atualizar

Aqui menos menor com algumas mudanças

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

Se for apenas uma linha de texto, você poderá usar a propriedade line-height, com o mesmo valor da altura do elemento:

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

Se o texto tiver várias linhas ou se o conteúdo for variável, você poderá usar o padding-top:

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

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

Se você estiver usando o framework Foundation 5 e Compass, você pode tentar isso.

input de .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; } 

saída .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 mim, apenas esta solução funcionou para o texto de múltiplas linhas:

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

Algumas das soluções aqui não funcionaram bem em pequenos círculos. Então eu fiz essa solução usando ol absoluto.

Usando o SASS ficará assim:

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

E pode ser usado 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); } 

Veja demo em https://codepen.io/matheusrufca/project/editor/DnYPMK

Veja o trecho para ver o CSS de saída

 .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

Obtive isso da página do YouTube, que tem uma configuração muito simples. Absolutamente sustentável e reutilizável.

 .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

Uma maneira de fazer isso é usar o flexbox para alinhar o texto no meio. A maneira que eu encontrei para fazer isso, é o seguinte:

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

Aqui está o plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview

Usando este código, ele também será responsivo.

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

Eu estava combinando algumas respostas de outras pessoas e com float e relative me deu o resultado que eu precisava.

Em HTML eu uso um div. Eu uso dentro de um li para uma barra de navegação.

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