htmlcssuser-interfacescalable

Scalable circles with dynamic numbers inside

Apologies if this has been asked and answered already, as I was not able to find an appropriate solution to this problem.

I need to work on a site navigation that require some numbers to be placed inside circles. The circles will increase in diameter based on the length of the text inside. I'm looking for a very elegant, preferably css only solution for this. Please note the alignment of the circles here with respect to the entire row and label text on the mock up attached. Here is the mockup

Solution

  • It required some CSS trickery to get this working, but this works in the latest version Chrome and Firefox. Let me know if you have any other questions.

    html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #9653DA;
  font: 600 14px sans-serif;
}
.nav-table {
  display: table;
  text-align: center;
}
.nav-row {
  display: table-row;
}
.nav-col {
  display: table-cell;
}
.text {
  margin: 1em;
}
.icon {
  display: inline-block;
  border-radius: 100%;
  border: 2px solid;
  min-width: 10px;
  padding: 0.5em;
  margin: 0.5em;
}
.icon div {
  position: relative;
  height: 0;
  padding: 50% 0;
  top: -7px; /* Half of font-size, in our case it is (14px / 2) */
}
    <div class="nav-table">

  <div class="nav-row">
    
    <div class="nav-col">
      <div class="icon">
        <div>20</div>
      </div>
    </div>
    
    <div class="nav-col">
      <div class="icon">
        <div>300</div>
      </div>
    </div>
    
    <div class="nav-col">
      <div class="icon">
        <div>50</div>
      </div>
    </div>
    
    <div class="nav-col">
      <div class="icon">
        <div>1</div>
      </div>
    </div>
  </div>
  
  <div class="nav-row">
    
    <div class="nav-col">
      <div class="text">Japanese</div>
    </div>
    
    <div class="nav-col">
      <div class="text">Main Course</div>
    </div>
    
    <div class="nav-col">
      <div class="text">Non Vegetarian</div>
    </div>
    
    <div class="nav-col">
      <div class="text">Beginners</div>
    </div>
    
  </div>


</div>