Html 如何在css3圆圈内垂直对齐一些文本？

我这里有三个内联元素，我正试图用css3将其做成一个圆圈，但问题是，当我添加css3样式时，圆圈内的文本没有垂直对齐，所以我的问题是，我如何确保圆圈内的字体大小/家族/浏览器/字体大小都垂直对齐

.num{
字体大小：30px；
字体大小：粗体；
颜色：白色；
高度：140像素；
宽度：140px；
文本对齐：居中；
背景：dd5638；
-webkit边界半径：100%；
-moz边界半径：100%；
边界半径：100%；
-webkit字体平滑：抗锯齿；
文本呈现：优化易读性；
}

41000多个工作岗位
56个国家
8个节目

垂直对齐文本的最佳且最简单的方法是使内容

显示：表格单元格

，然后将其垂直对齐到

中间

。就你而言：

.num.num内容{
显示：表格单元格；
垂直对齐：中间对齐；
}

---

但是，为了使其工作，父元素必须使用

display:table

。这应该可以奏效

垂直对齐文本的最佳且最简单的方法是使内容

显示：表格单元格

，然后将其垂直对齐到

中间

。就你而言：

.num.num内容{
显示：表格单元格；
垂直对齐：中间对齐；
}

---

但是，为了使其工作，父元素必须使用

display:table

。这应该可以奏效

给出.num div元素

位置：相对然后将.num内容绝对定位为强制居中div

.num-content
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}


.num{
字号：26px；
线高：26px；
字体大小：粗体；
颜色：白色；
高度：140像素；
宽度：140px；
文本对齐：居中；
背景：dd5638；
-webkit边界半径：100%；
-moz边界半径：100%；
边界半径：100%；
-webkit字体平滑：抗锯齿；
文本呈现：优化易读性；
位置：相对位置；
}
.num内容
{
位置：绝对位置；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
}

41000多个职位
56个国家
8个节目
给出.num div元素
位置：相对然后将.num内容绝对定位为强制居中div

.num-content
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}


.num{
字号：26px；
线高：26px；
字体大小：粗体；
颜色：白色；
高度：140像素；
宽度：140px；
文本对齐：居中；
背景：dd5638；
-webkit边界半径：100%；
-moz边界半径：100%；
边界半径：100%；
-webkit字体平滑：抗锯齿；
文本呈现：优化易读性；
位置：相对位置；
}
.num内容
{
位置：绝对位置；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
}

41000多个职位
56个国家
8个节目
您也可以使用flex布局并减小一点字体大小：


.num{
字体大小：25px；/*大小从30减小到25*/
字体大小：粗体；
颜色：白色；
高度：140像素；
宽度：140px；
文本对齐：居中；
背景：dd5638；
-webkit边界半径：100%；
-moz边界半径：100%；
边界半径：100%；
-webkit字体平滑：抗锯齿；
文本呈现：优化易读性；
显示：flex；/*已添加*/
弹性流：列；/*已添加*/
对齐内容：中心；/*已添加*/
}

41000多个工作岗位
56个国家
8个节目
您也可以使用flex布局并减小一点字体大小：


.num{
字体大小：25px；/*大小从30减小到25*/
字体大小：粗体；
颜色：白色；
高度：140像素；
宽度：140px；
文本对齐：居中；
背景：dd5638；
-webkit边界半径：100%；
-moz边界半径：100%；
边界半径：100%；
-webkit字体平滑：抗锯齿；
文本呈现：优化易读性；
显示：flex；/*已添加*/
弹性流：列；/*已添加*/
对齐内容：中心；/*已添加*/
}

41000多个工作岗位
56个国家
8个节目
我通常只在子对象周围添加均匀的填充，如果子对象是文本，我会将行高设置为与字体大小匹配

这使您可以轻松地将媒体查询添加到圆圈中，只需更改一个填充值即可使其变小/变大。而且，不太需要CSS

   <div class="circle">
      <div class="child">8</div>
   </div>

  .circle{
    background:#000;
    border-radius:50%;
 }

  .child{
     padding:20px;
     font-size:1em;
     line-height:1em;
     color:#fff;
}


8.
.圆圈{
背景：#000；
边界半径：50%；
}
.孩子{
填充：20px；
字号：1em；
线高：1米；
颜色：#fff；
}
我通常只在子对象周围添加均匀的填充，如果子对象是文本，我会将行高设置为与字体大小匹配

这使您可以轻松地将媒体查询添加到圆圈中，只需更改一个填充值即可使其变小/变大。而且，不太需要CSS

   <div class="circle">
      <div class="child">8</div>
   </div>

  .circle{
    background:#000;
    border-radius:50%;
 }

  .child{
     padding:20px;
     font-size:1em;
     line-height:1em;
     color:#fff;
}


8.
.圆圈{
背景：#000；
边界半径：50%；
}
.孩子{
填充：20px；
字号：1em；
线高：1米；
颜色：#fff；
}
Flexbox是最好的方法

display: inline-flex;
align-items: center;

不要使用别人在别处建议的表格方法。Flex是最好的答案。
Flexbox是最好的答案