文本和标签在CSS圆圈中央

Question

我想创造的东西几乎相当于在CSS如下：

其中+2在圈内水平，垂直居中和DEX水平居中低于+2。

我该如何做到这一点？

Answer 1

您可以为此使用flexbox。

.circle { 
 
    /* circle styles */ 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #222; 
 
    border-radius: 50%; 
 
    
 
    /* become a flex container */ 
 
    /* its children will be flex items */ 
 
    display: flex; 
 
    /* place items in column */ 
 
    flex-direction: column; 
 
    /* center flex items horizontally */ 
 
    align-items: center; 
 
    /* center all content vertically */ 
 
    justify-content: center; 
 
} 
 

 
/* simulate one more item to "balance" dex text */ 
 
.circle:before { 
 
    content: "\A0"; 
 
    visibility: hidden; 
 
}

<div class="circle"> 
 
    <div class="number">+2</div> 
 
    <div class="text">dex</div> 
 
</div>

Answer 2

一个简单的解决方案是使用line-height来控制文本的垂直对齐，但是当沿着调整默认行高的全局样式使用时，它变得不可靠。

所以，我建议使用下面的解决方案，它是更清洁，更易于管理：

.circle{ 
 
    width: 60px; 
 
    height: 48px; 
 
    border: 1px solid #000; 
 
    background: #fff; 
 
    text-align: center; 
 
    border-radius: 100%; 
 
    font-size: 24px; 
 
    line-height: 16px; 
 
    padding-top: 14px; 
 
} 
 
.circle span{ 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
    margin-top: 
 
    display: block; 
 
}

<div class="circle"> 
 
    +12 
 
    <span>dex</span> 
 
</div>

HTML： 使用.circle元素作为实际的圆，包括号码和一个持有标签的<span>元素。

CSS： 使用line-height控制标签和号码之间的间距和我使用的padding-top推的数量和垂直居中。