css: come disegnare un cerchio con il testo in mezzo?


156

Ho trovato questo esempio su StackOverflow:

Disegna Circle usando solo CSS

Che è grandioso. Ma vorrei sapere come modificare quell'esempio in modo da poter includere il testo nel mezzo del cerchio?

Ho anche trovato questo: centrare verticalmente e orizzontalmente il testo in cerchio nei CSS (come il badge di notifica dell'iPhone)

ma per qualche ragione, non funziona per me. Quando creo il seguente codice di prova:

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

invece di un cerchio, ottengo una forma ovale. Sto cercando di giocare con il codice per vedere come posso farlo funzionare.

Risposte:


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: Non proprio il mio fare - bryanhadaway.com/how-to-create-circles-with-css
Jawad

3
Se riesci a rendere border-radius:50%;ciò rende il tuo evento di codice più elegante e portatile, senza dover cambiare questo attributo ogni volta in base alla larghezza e all'altezza;)
bonCodigo

14
Personalmente rimuoverei l'attributo line-height e aggiungere vertical-align: middle; display: tabella-cella; In questo modo le tue righe di testo saranno comunque centrate. jsfiddle.net/z9bLtw99
ministe2003

3
Che dire di più righe.
Henry Zhu,

1
@DamjanPavlica Vedi l'ultimo aggiornamento di questa risposta che non imposta esplicitamente alcuna larghezza o altezza. Funziona anche su più righe, come puoi verificare dal vivo sul jsfiddle
Jose Rui Santos

57

Se i tuoi contenuti andranno a capo e saranno di altezza sconosciuta, questa è la soluzione migliore:

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


6
Questo genera ovali, non cerchi perfetti.
Sophivorus,

2
questa è la vera soluzione. anche se devo menzionare, ciò display: absoluterompe l'allineamento, ma la soluzione semplice è avvolgerlo all'interno di un altro div.
Ondřej Želazko,

1
produce un cerchio perfetto (non un ovale). Anche un div wrapper è davvero una buona idea quando si utilizza il posizionamento assoluto o fisso.
Krivar,

2
Per un posizionamento assoluto, utilizzare un involucro. Ma dà un ovale in quanto la larghezza massima che può raggiungere è 180px. Quindi, se si specifica la larghezza minima alla larghezza desiderata e si imposta anche l'altezza su quel valore. Otterrai un cerchio. Altrimenti otterrai un ovale oltre la larghezza e l'altezza> 180px.
mutp

27

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

Ciò ti consentirà di allineare verticalmente e orizzontalmente il testo a riga singola e multilinea.


1
La migliore soluzione in un mondo ideale. Purtroppo, rimangono molti bug tra browser nell'implementazione di flexbox: github.com/philipwalton/flexbugs
jimiayler

per IE: `` display: -ms-flexbox ''
Michael Guild,

11

Penso che tu voglia scrivere un testo in un ovale o in un cerchio? perché non questo?

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


8

Per un web design mi è stato recentemente assegnato di dover risolvere la quantità di testo centrata e sconosciuta in un problema a cerchio fisso e ho pensato di condividere la soluzione qui per altre persone che guardano in combinazioni cerchio / testo.

Il problema principale che avevo era che il testo spesso spezzava i confini del cerchio. Per risolvere questo ho finito con 4 div. Un contenitore rettangolare che specificava i limiti massimi (fissi) del cerchio. Al suo interno ci sarebbe il div che disegna il cerchio con la sua larghezza e altezza impostate al 100%, quindi cambiando la dimensione del genitore si cambia la dimensione del cerchio reale. Al suo interno ci sarebbe un altro div rettangolare che, usando% 's, creerebbe un'area di delimitazione del testo impedendo a qualsiasi testo di lasciare il cerchio (per la maggior parte) Quindi infine il div reale per il testo e la centratura verticale.

Ha più senso come codice:

/* 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>			

Puoi decommentare i colori dei bordi sui div container per vedere come vincola.

Cose da tenere a mente: puoi ancora spezzare i limiti del cerchio se inserisci troppo testo o usi parole / testo ininterrotto troppo lunghe. Non è ancora adatto per un testo completamente sconosciuto (come l'input dell'utente) ma funziona meglio quando sai vagamente qual è la più grande quantità di testo che devi archiviare e imposta le dimensioni del tuo cerchio e le dimensioni del carattere di conseguenza. Ovviamente puoi impostare il div del contenitore di testo in modo da nascondere qualsiasi overflow, ma ciò può sembrare "rotto" e non può sostituire la contabilità delle dimensioni massime nel tuo progetto.

Spero che questo sia utile a qualcuno! HTML / CSS non è la mia disciplina principale, quindi sono sicuro che può essere migliorato!


8

Disegna un cerchio con il testo in mezzo con il tag HTML e senza CSS

HTML con tag SVG per questo. Puoi seguire questo approccio standard se non vuoi andare per 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>

inserisci qui la descrizione dell'immagine


Per riferimento futuro per i lettori occasionali: Come essere visto nel codice e l'immagine, il testo è centrato solo perché il font-size, font-family, x, e yin fila. Per chiunque non abbia installato Verdana non sarà centrato. Anche l'utilizzo x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"non risolve il problema.
LosManos,

6

Se è solo una riga di testo, puoi utilizzare la proprietà line-height, con lo stesso valore dell'altezza dell'elemento:

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

Se il testo ha più righe o se il contenuto è variabile, è possibile utilizzare il padding-top:

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

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


6

Ovviamente, devi usare i tag per farlo. Uno per creare il cerchio e l'altro per il testo.

Qui un po 'di codice può aiutarti

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

Esempio live qui http://jsbin.com/apumik/1/edit

Aggiornare

Qui meno piccolo con alcune modifiche

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


Grazie! Capisco il tuo esempio meglio di quello trovato nel post ( stackoverflow.com/questions/4801181/… ) ma vorrei capire perché quell'esempio non funziona per me ...
punto

sembra che abbiano fatto la stessa cosa che stai facendo, ma appena combinati in una classe nel css ...?
punto

Sì, ho appena notato che ho fatto lo stesso.
Ligth

Dai un aggiornamento profondo e malato al mio post e al mio codice per renderlo migliore: D
Ligth,

3

Per me, solo questa soluzione ha funzionato per il testo multilinea:

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

3

Se stai usando Foundation 5 e Compass Framework, puoi provare questo.

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

.css output

.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

Capito da questa pagina di YouTube che ha una configurazione davvero semplice. Assolutamente mantenibile e riutilizzabile.

.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

Alcune soluzioni qui non hanno funzionato bene per me su piccoli cerchi. Quindi ho realizzato questa soluzione usando la posizione assoluta.

L'utilizzo di SASS sarà simile al seguente:

.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 può essere usato come

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

Guarda la demo su https://codepen.io/matheusrufca/project/editor/DnYPMK

Vedi lo snippet per visualizzare l'output CSS


0

Un modo per farlo è usare la flexbox per allineare il testo al centro. Il modo in cui ho scoperto di farlo è il seguente:

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

Qui il plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview


0

Usando questo codice sarà anche reattivo.

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


Questa è una copia semplice di un'altra risposta. Vergogna. -1
Tim Gautier

0

Stavo combinando alcune risposte di altre persone e con floaterelative mi ha dato il risultato di cui avevo bisogno.

In HTML utilizzo un div. Lo uso all'interno lidi una barra di navigazione.

.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;
    }
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.