如何在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是最好的答案。