内部带有动态数字的可缩放圆圈

Question

抱歉，如果这个问题已经被问及并得到了回答，因为我无法找到解决这个问题的合适方法。

我需要处理需要在圆圈内放置一些数字的网站导航。圆圈的直径将根据内部文本的长度增加。我正在为此寻找一个非常优雅的，最好是仅使用 css 的解决方案。请注意此处的圆圈相对于整行的对齐方式以及附加模型上的标签文本。

Answer 1

它需要一些 CSS 技巧才能使其正常工作，但这适用于最新版本的 Chrome 和 Firefox。如果您有任何其他问题，请告诉我。

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>