web-dev-qa-db-fra.com

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

J'ai trouvé cet exemple sur stackoverflow:

Tracez un cercle en utilisant css seul

Qui est super. Mais j'aimerais savoir comment modifier cet exemple pour pouvoir inclure du texte au centre du cercle?

J'ai aussi trouvé ceci: Centrant le texte verticalement et horizontalement dans un cercle en CSS (comme un 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.

csscss-shapes
134
dot

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

Si votre contenu va envelopper et avoir une hauteur inconnue, c’est votre meilleur choix:

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

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 du texte multiligne et multiligne aligné au milieu, à la verticale et à l'horizontale.

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>
19
Mohammad Usman

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

On m'a récemment confié, pour un design Web, que je devais résoudre la quantité de texte centré et inconnu dans un problème de cercle fixe et je pensais partager la solution ici pour d'autres personnes cherchant des combinaisons de cercle/texte.

La principale question que j'avais était que le texte brisait souvent les limites du cercle. Pour résoudre ce problème, j'ai fini par utiliser 4 divs. Un conteneur rectangulaire qui spécifie les limites maximales (fixes) du cercle. À l'intérieur de cela se trouve la division qui dessine le cercle avec sa largeur et sa hauteur définies à 100%; ainsi, si vous modifiez la taille du parent, vous modifiez la taille du cercle réel. À l'intérieur, il y aurait un autre div rectangulaire qui, en utilisant% 's, créerait une zone de limite de texte empêchant tout texte de quitter le cercle (pour la plupart). Enfin, finalement, le div actuel pour le texte et le centrage vertical.

C'est plus logique 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 supprimer le commentaire des couleurs de bordure sur les divs de conteneur pour voir les contraintes.

Ce qu'il faut savoir: Vous pouvez toujours casser les limites du cercle si vous mettez trop de texte ou utilisez des mots/texte ininterrompu trop longs. Ce n'est pas encore un bon choix pour un texte complètement inconnu (comme une saisie utilisateur), mais cela fonctionne mieux lorsque vous savez vaguement quelle est la plus grande quantité de texte que vous devez stocker et que vous définissez la taille de votre cercle et celle de la police. Vous pouvez définir la div de conteneur de texte de manière à masquer tout débordement, bien sûr, mais cela peut sembler "cassé" et ne constitue pas un remplacement pour comptabiliser réellement la taille maximale correctement dans votre conception.

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

8
David Burford

Si ce n'est qu'une 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
Bruno Gomes

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

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

Mise à jour

Ici moins petit avec quelques modifications

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

5
Ligth

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

entrée .ass

$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%;
}
3
MagicJoseph

Tracez un cercle avec du texte au milieu avec balise HTML et sans CSS

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

enter image description here

3
Ashish

Pour moi, seul 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
Damjan Pavlica

Ceci est obtenu 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
Front-end Developer

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.

Utiliser 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 pour voir la sortie 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%);
}
<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>
2
m.rufca
.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>
1
Hao

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

Je combinais certaines réponses d’autres personnes et avec float et relative, j’ai obtenu le résultat dont j’avais besoin.

En HTML, j'utilise un div. Je l'utilise dans un li pour 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;
    }
0
Halfacht

Une solution consiste à utiliser flexbox pour aligner le texte au milieu. La façon dont j'ai trouvé 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;
 }

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

0
PennyBirman