文本和標籤在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推的數量和垂直居中。