フォントの中にテキストを配置する方法 - すばらしいサークル

Question

私は以下のCSS/htmlを持っています。 1桁しかなければ正しいマージンを計算できますが、2桁または3桁の数字があっても常に動作するようにしたいと思います。誰もがこれに対して良い解決策を持っていますか？

.circle-stack { 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 10px; 
 
    height: 10px; 
 
    top: 25px; 
 
    left: 5px; 
 
} 
 
\t \t 
 
.fa-circle-thin, 
 
.points-indicator { 
 
    position: absolute; 
 
} 
 
.fa-circle{ 
 
    font-size: 16px; 
 
    color: #c0cff6; 
 
} 
 

 
.points-indicator { 
 
    color: #1f0e3e; 
 
    font-weight: bold; 
 
    top: 1px; 
 
    left: 4px; 
 
    width: 5px; 
 
    height: 5px; 
 
    font-size: 10px; 
 
    line-height: 16px; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="circle-stack"> 
 
    <i class="fa fa-circle" aria-hidden="true"></i> 
 
    <a href="/notifications" title="Unread notifications"><span class="points-indicator">10</span></a> 
 
</div>

Answer 1

それを行うことができます。

トリックは、CSS

top:50%; 
left:50%; 
transform:translateX(-50%) translateY(-50%); 

で円スタッククラス内の項目を設定することはここで私はspanの順序を変更し、あなたの上記のコードのfiddle link

プレビュー

ですpoints-indicatorクラスのaタグがスパンに適用されました。 スパン内のaタグにtext-decoration:noneを使用すると、下線を削除できます。

Answer 2

あなたはまた、フォント素晴らしいアイコンを使用せずにそれを行うことができ、このよう

.circle-stack { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.fa-circle-thin, 
 
.points-indicator { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.fa-circle { 
 
    font-size: 16px; 
 
    color: #c0cff6; 
 
} 
 

 
.points-indicator { 
 
    color: #1f0e3e; 
 
    font-weight: bold; 
 
    font-size: 10px; 
 
    line-height: 16px; 
 
    display: inline-block; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="circle-stack"> 
 
    <i class="fa fa-circle" aria-hidden="true"></i> 
 
    <a href="/notifications" title="Unread notifications"><span class="points-indicator">10</span></a> 
 
</div>

Answer 3

font-awesomeライブラリの必要はありません。

.circle{ 
 
    width:100px; 
 
    height:100px; 
 
    border-radius:50%; 
 
    box-sizing:border-box; 
 
    text-align:center; 
 
    display:inline-block; 
 
    line-height:100px; 
 
    background-color:#000; 
 
} 
 
.circle a{ 
 
    text-decoration:none; 
 
    color:#fff; 
 
    font-size: 30px; 
 
}

<div class="circle"> 
 
    <a href="#">10</a> 
 
</div> 
 
<div class="circle"> 
 
    <a href="#">100</a> 
 
</div> 
 
<div class="circle"> 
 
    <a href="#">1000</a> 
 
</div>