html - 如何在css3圈子内垂直对齐某些文本？

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

.num {
  font-size: 30px;
  font-weight: bold;
  color: white;
  height: 140px;
  width: 140px;
  text-align: center;
  background: #dd5638;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-4">
    <div class="num">
      <div class="num-content">
        41, 000+ <span>jobs</span>
      </div>
      <!--num content-->
    </div>
    <!--num-->
  </div>
  <!--col-->
  <div class="col-xs-4">
    <div class="num">
      <div class="num-content">
        56 <span>countries</span>
      </div>
      <!--num content-->
    </div>
    <!--num-->
  </div>
  <!--col-->
  <div class="col-xs-4">
    <div class="num">
      <div class="num-content">
        8 <span>programs</span>
      </div>
      <!--num content-->
    </div>
    <!--num-->
  </div>
  <!--col-->
</div>
<!--row-->

最佳答案

给.num div元素position: relative;然后绝对将.num-content定位为强制居中的div

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

.num{
font-size: 26px;
line-height: 26px;
font-weight: bold;
color: white;
height: 140px;
width: 140px;
text-align: center;
background: #dd5638;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius: 100%;
-webkit-font-smoothing:antialiased;
text-rendering: optimizeLegibility;
position:relative;
}

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row">
   <div class="col-xs-4">
      <div class="num">
         <div class="num-content">
            <span>41,000+ jobs</span>
         </div>
         <!--num content-->
      </div>
      <!--num-->
   </div>
   <!--col-->
   <div class="col-xs-4">
      <div class="num">
         <div class="num-content">
            <span>56 countries</span>
         </div>
         <!--num content-->
      </div>
      <!--num-->
   </div>
   <!--col-->
   <div class="col-xs-4">
      <div class="num">
         <div class="num-content">
            <span>8 programs</span>
         </div>
         <!--num content-->
      </div>
      <!--num-->
   </div>
   <!--col-->
</div>
<!--row-->

关于html - 如何在css3圈子内垂直对齐某些文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42118973/