Text und Etikett in CSS Kreis zentriert

Question

Ich versuche, etwas zu schaffen, etwa wie die folgende in CSS:

wo die +2 horizontal zentriert und vertikal in den Kreis und die DEX horizontal zentriert unter dem +2.

Wie kann ich das erreichen?

Answer 1

Sie können flexbox dafür verwenden.

.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

Eine einfache Lösung verwendet line-height, um die vertikale Ausrichtung von Text zu steuern, die jedoch unzuverlässig wird, wenn sie entlang eines globalen Stylings verwendet wird, das die Standardlinienhöhen anpasst.

Also, ich schlage vor, mit der folgenden Lösung, die viel sauberer und einfacher zu verwalten:

.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: Verwenden Sie ein .circle Element als eigentlicher Kreis und umfasst die Nummer und ein <span> Element, das das Etikett enthält.

CSS: Verwenden der line-height den Abstand zwischen der Markierung zu steuern, und der Anzahl und ich bin mit den padding-top die Anzahl und zentriert ihn vertikal zu schieben.