css: comment dessiner un cercle avec du texte au milieu?


156

J'ai trouvé cet exemple sur stackoverflow:

Dessiner un cercle en utilisant uniquement le CSS

Qui est genial. Mais j'aimerais savoir comment modifier cet exemple afin que je puisse inclure du texte au milieu du cercle?

J'ai également trouvé ceci: centrer verticalement et horizontalement le texte en cercle dans CSS (comme le badge de notification iphone)

mais pour une raison quelconque, cela ne fonctionne pas pour moi. Lorsque je crée le code de test suivant:

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

au lieu d'un cercle, j'obtiens une forme ovale. J'essaie de jouer avec le code pour voir comment je peux le faire fonctionner.

Réponses:


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: Pas vraiment ce que je fais - bryanhadaway.com/how-to-create-circles-with-css
Jawad

3
Si vous pouvez faire border-radius:50%;cela rend votre événement de code plus élégant et portable, sans avoir à changer cet attribut à chaque fois en fonction de la largeur et de la hauteur;)
bonCodigo

14
Personnellement, je supprimerais l'attribut line-height et ajouterais vertical-align: middle; affichage: table-cellule; De cette façon, vos lignes de texte seront toujours centrées. jsfiddle.net/z9bLtw99
ministe2003

3
Qu'en est-il de plusieurs lignes.
Henry Zhu

1
@DamjanPavlica Voir la dernière mise à jour sur cette réponse qui ne définit explicitement aucune largeur ou hauteur. Fonctionne également pour plusieurs lignes, comme vous pouvez le vérifier en direct sur jsfiddle
Jose Rui Santos

57

Si votre contenu va s'emballer et avoir une hauteur inconnue, voici votre meilleur pari:

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
Cela génère des ovales, pas des cercles parfaits.
Sophivorus

2
c'est la vraie solution. bien que je doive mentionner, cela display: absoluterompt l'alignement - mais la solution facile est de l'envelopper dans un autre div.
Ondřej Želazko

1
produit un cercle parfait (pas un ovale). Un div wrapper est en effet une bonne idée lorsque vous utilisez un positionnement absolu ou fixe.
krivar le

2
Pour un positionnement absolu, vous utiliseriez un wrapper. Mais cela donne un ovale car la largeur maximale à laquelle il peut aller est de 180 px. Donc, si vous spécifiez min-width à la largeur souhaitée et définissez également la hauteur sur cette valeur. Vous obtiendrez un cercle. Sinon, vous obtiendrez un ovale au-delà de la largeur et de la hauteur> 180 px.
mutp

27

Vous pouvez utiliser 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;
}

Cela vous permettra d'avoir un texte sur une seule ligne et sur plusieurs lignes aligné verticalement et horizontalement au milieu.


1
La meilleure solution dans un monde idéal. Malheureusement, il reste de nombreux bogues entre navigateurs dans l'implémentation de flexbox: github.com/philipwalton/flexbugs
jimiayler

pour IE: `` display: -ms-flexbox '' ``
Michael Guild

11

Je pense que vous voulez écrire du texte dans un ovale ou un cercle? pourquoi pas celui-ci?

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


8

Pour une conception Web, on m'a récemment donné que je devais résoudre la quantité de texte centrée et inconnue dans un problème de cercle fixe et j'ai pensé partager la solution ici pour d'autres personnes qui recherchent des combinaisons cercle / texte.

Le principal problème que j'avais était que le texte brisait souvent les limites du cercle. Pour résoudre cela, j'ai fini par utiliser 4 divs. Un conteneur rectangulaire qui spécifie les limites maximales (fixes) du cercle. À l'intérieur, il y aurait le div qui dessine le cercle avec sa largeur et sa hauteur réglées à 100%, donc changer la taille du parent change la taille du cercle réel. À l'intérieur, il y aurait un autre div rectangulaire qui, en utilisant des%, créerait une zone de délimitation du texte empêchant tout texte de quitter le cercle (pour la plupart) Puis enfin le div réel pour le texte et le centrage vertical.

Cela a plus de sens en tant que code:

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

Vous pouvez décommenter les couleurs de bordure sur les divs de conteneur pour voir comment cela contraint.

Choses à savoir: vous pouvez toujours briser les limites du cercle si vous mettez trop de texte ou utilisez des mots / texte non interrompu trop longs. Ce n'est toujours pas un bon choix pour le texte complètement inconnu (comme la saisie utilisateur), mais fonctionne mieux lorsque vous savez vaguement quelle est la plus grande quantité de texte que vous aurez besoin de stocker et que vous définissez la taille de votre cercle et la taille de la police en conséquence. Vous pouvez bien sûr définir le conteneur de texte div pour masquer tout débordement, mais cela peut simplement sembler "cassé" et ne remplace pas la prise en compte correcte de la taille maximale dans votre conception.

J'espère que cela est utile à quelqu'un! HTML / CSS n'est pas ma discipline principale, donc je suis sûr qu'il peut être amélioré!


8

Dessinez un cercle avec du texte au milieu avec HTML Tag et sans CSS

HTML ayant une balise SVG pour cela. Vous pouvez suivre cette approche standard si vous ne voulez pas utiliser 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>

entrez la description de l'image ici


Pour référence ultérieure pour les lecteurs occasionnels: Comme le voir dans le code et l' image, le texte est centré uniquement parce que la font-size, font-family, xet yaligner. Pour quiconque n'a pas installé Verdana, il ne sera pas centré. L'utilisation x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"ne résout pas non plus le problème.
LosManos le

6

S'il ne s'agit que d'une seule ligne de texte, vous pouvez utiliser la propriété line-height, avec la même valeur que la hauteur de l'élément:

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

Si le texte comporte plusieurs lignes, ou si le contenu est variable, vous pouvez utiliser le padding-top:

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

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


6

Bien sûr, vous devez utiliser des balises pour faire cela. Un pour créer le cercle et un autre pour le texte.

Ici, un code peut vous aider

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

Exemple en direct ici http://jsbin.com/apumik/1/edit

Mettre à jour

Ici moins petit avec quelques changements

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


Merci! Je comprends mieux votre exemple que celui trouvé dans l'article ( stackoverflow.com/questions/4801181/… ) mais j'aimerais comprendre pourquoi cet exemple ne fonctionne pas pour moi ...
dot

on dirait qu'ils ont fait la même chose que vous, mais simplement combinés en une seule classe dans le css ...?
dot

Oui, je viens de remarquer que j'ai fait la même chose.
Ligth

Donne une seconde, je mets à jour mon message et mon code pour le rendre meilleur: D
Ligth

3

Pour moi, seule cette solution fonctionnait pour le texte multiligne:

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

3

Si vous utilisez Foundation 5 et le framework Compass, vous pouvez essayer ceci.

entrée .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;
}

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

J'ai obtenu ceci sur la page YouTube qui a une configuration très simple. Absolument maintenable et réutilisable.

.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

Certaines des solutions ici ne fonctionnaient pas bien pour moi sur de petits cercles. J'ai donc fait cette solution en utilisant la position absolue ol.

L'utilisation de SASS ressemblera à ceci:

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

Et peut être utilisé comme

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

Voir la démo sur https://codepen.io/matheusrufca/project/editor/DnYPMK

Voir l'extrait de code pour afficher le CSS de sortie


0

Une façon de le faire est d'utiliser flexbox afin d'aligner le texte au milieu. La façon dont j'ai trouvé pour le faire est la suivante:

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

Voici le plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview


0

En utilisant ce code, il sera également réactif.

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


Ceci est une copie directe d'une autre réponse. La honte. -1
Tim Gautier

0

Je combinais des réponses d'autres personnes et avec floatet relativecela m'a donné le résultat dont j'avais besoin.

En HTML, j'utilise un div. Je l'utilise dans un lipour une barre de navigation.

.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;
    }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.