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

Question

我在这里有这三个内联元素，试图用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--> 

Answer 1

赋予.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--> 

Answer 2

您还可以使用flex布局并减小一点字体大小：

 .num { font-size: 25px;/* sized down 30 to 25 */ 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; display:flex;/* added */ flex-flow:column;/* added */ justify-content:center;/* added */ } 

 <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--> 

Answer 3

垂直对齐文本的最佳和最简单方法是使内容display: table-cell ，然后vertical-align其vertical-align到middle 。 在您的情况下：

.num .num-content{
    display: table-cell;
    vertical-align: middle;
}

但是，为了使其正常工作，父元素必须使用display: table 。 这应该够了吧。 :)

Answer 4

我通常只在子项周围添加均匀的填充，如果子项是文本，则设置行高以匹配字体大小。

这样，您只需更改单个值-填充即可轻松地将媒体查询添加到圈子中，以使其变小/变大。 另外，不需要太多的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;
}

Answer 5

Flexbox是最好的方法。

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

不要执行别人在其他地方建议的表格方法。 Flex是最好的答案。