Bonjour bonjour,

J'aimerai réaliser des sortes de pastilles cliquables avec un texte écrit dedans un pue comme ceci : 

Cependant je n'arrive pas à centrer le texte dans le rond, l'idée serait aussi que pour un texte plus grand le rond s'adapte en s'agrandissant mais en restant rond.

Pour le moment j'ai :

<div class="dropper">
			
			<div class="draggable">TED2</div>
    		<div class="draggable">TGS1</div>
    		<div class="draggable">TOSA1</div>
    		<div class="draggable">THINT1</div>
    		<div class="draggable">TIRM1</div>
    		<div class="draggable">TMI1</div>
   			<div class="draggable">TRIXELL1</div>
    		<div class="draggable">TAO1</div>
    		<div class="draggable">TR61</div>

    		</div>

.draggable
{
  	display: inline-flex;
  	background-image:-webkit-linear-gradient(top, #69A3B9 0%, #253746 100%);
   	background-image: linear-gradient(to bottom, #69A3B9 0%, #253746 100%);

   	margin: 30px;
    color: white;
    background-color: #69A3B9;

   	width: 100px;
   	height: 100px;
   	-moz-border-radius: 50%;
   	-webkit-border-radius: 50%;
   	border-radius: 50%;

    text-align: center;
    font-size: 2em;
}

Merci beaucoup =)

Hello,

comme ceci -> https://jsfiddle.net/f1145bh6/ ?

Salut,

Pour ton idée d'agrandir les ronds selon le texte, pour moi ça va un peu casser l'UI, et c'est pas top. Choisis plutôt tes textes de manière cohérentes (surtout si ceux-ci ne sont pas amenés a bouger) et adapte tous tes ronds pour qu'ils fassent la même taille.

la c'est à titre d'exemple pour un style statique, par contre comme le dit MrChampy, il faut trouver un bon équilibre avec le texte si tu es amené à changer la taille de tes éléments. Comme les réduire pour un affichage cohérent avec la taille de la fenêtre du navigateur/support.

Bonne continuation. 

-
Edité par Lucky13 26 avril 2017 à 18:15:34