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 numb

Solution 1:

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: 60014px 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;
}
.icondiv {
  position: relative;
  height: 0;
  padding: 50%0;
  top: -7px; /* Half of font-size, in our case it is (14px / 2) */
}

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