Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

Answer 3

垂直对齐文字的最佳和最简单方法是将内容display: table-cell，然后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是这里最好的答案。

如何垂直对齐css3圈内的一些文字？

5 个答案: