Progress Circles Not Aligned With Label

The below code creates a progress circle with number in the middle. I need each circle to have a label under it, but can't put it in either a span or div without disrupting the CSS

Solution 1:

Checked the code, seems like the label under it doesn't ruin the circle, even if you use <div> or <span>. here is something you could do:

Use a container to control the behavior of the circles and the labels:

  <div class="progressContainer">
    <div class="progress-circle progress-45"><span>333</span></div>
    <div>Tag A</div>
    <div class="progress-circle progress-45"><span>4444</span></div>
    <div>TAG b</div>
    <div class="progress-circle progress-45"><span>555</span></div>
    <div>TAG C</div>
  </div>

This way, you can control how the circle and the label behave in the webpage, you can give the class progressContainer a text-align: center; to make all of the code inside the class be centered (without using <center> which is bad practice), if you need to make them all align left, just change it from center to left. I hope i understood your question correctly.