trois cercles dans une ligne avec un espacement égal

Question

J'ai un design que j'essaie de reproduire en HTML et CSS.

En ce moment, je suis en mesure d'obtenir ce à fiddle.

Je me demande comment je peux faire les trois cercles ci-dessus dans une rangée avec un espacement égal dans chacun d'entre eux dans mon violon comme indiqué exactement dans le dessin. J'ai essayé d'utiliser,

<span class="circle"></span> 

.circle:before { 
    content: ' \25CF'; 
    font-size: 200px; 
} 

Et,

#circle { 
    background: #f00; 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
} 

Mais malheureusement, je ne suis pas en mesure d'obtenir la même conception dans mon violon ci-dessus.

Answer 1

Vous pouvez créer les cercles avec css:

.circle { 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    margin: 0 auto; 
} 

Et mettre chacun d'eux la couleur pertinente:

.circle.purple { 
    background: purple; 
} 
.circle.orange { 
    background: orange; 
} 
.circle.green { 
    background: green; 
} 

ici est le correctif basé sur votre jsfiddle:
https://jsfiddle.net/Lh5m11ya/3/embedded/result/

Answer 2

Vous n'avez pas vraiment besoin de futz avec: avant. Il suffit de régler la chose à display: block;

.circle { 
    display: block; 
    height: 100px; 
    width: 100px; 
    background: red; 
    border-radius: 100%; 
} 

https://jsfiddle.net/Lh5m11ya/2/

Answer 3

ici est une approche basée sur la boîte flex: https://jsfiddle.net/z2s8zq72/

mettre une classe conteneur avec flex d'affichage et une config:

.item-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 

Ce jus définit comme un affichage flexible et la direction fixe ce pour afficher les éléments de haut en bas, puis aligne tout au centre.

et les cercles comme:

.circle { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
} 
.circle.red { 
    background: #f00; 
} 
.circle.green { 
    background: green; 
} 
.circle.blue { 
    background: blue; 
} 

et en html:

<div id="healthy" class="col-lg-4 item-container"> 
    <div class="circle blue"></div> 
    <h3>title</h3> 
    <p>text.</p> 

</div>