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

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.

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>

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

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

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

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.

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

<div class="circles">
  <div class="circle-with-text">
    Here is some text in circle
  </div>
  <div class="circle-with-text multi-line-text">
    Here is some multi-line text in circle
  </div>
</div>

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>

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

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>

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/

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

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

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

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>

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

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

<div id="red-circle" class="circle-text">
  <span class="inner-text center-align">Hey</span>
</div>

<div id="green-circle" class="circle-text">
  <span class="inner-text center-align">Big size circle</span>
  <div>
    <style>
      #red-circle {
        background-color: red;
        border: 1px solid black;
        width: 60px;
        height: 60px;
      }
      
      #green-circle {
        background-color: green;
        border: 1px solid black;
        width: 150px;
        height: 150px;
      }
    </style>

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

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

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