固定幅と高さを使用しないCSSサークル

Question

通知回数を円内に表示したいが、円の内側に大きい数字/テキストがあるときに円が広がるように固定幅を持たせたくない。

.circle { 
 
    height: 20px; 
 
    width: 20px; 
 
    line-height: 20px; 
 
    border-radius: 50%; 
 
    background-color: red; 
 
    color: white; 
 
    text-align: center; 
 
}

<div class="circle">5</div> 
 
<br> 
 
<div class="circle">102</div>

Answer 1

このCSSのみの解決策を参照してください。 1桁の数値には同じ値のmin-widthとmin-heightを設定します。垂直方向の整列と正方形の形状の維持には、擬似要素を使用します。 border-radiusは円のコンテナに適用されます。

.circle { 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    min-width: 20px; 
 
    min-height: 20px; 
 
    padding: 5px; 
 
    background: red; 
 
    color: white; 
 
    text-align: center; 
 
    line-height: 1; 
 
    box-sizing: content-box; 
 
    white-space: nowrap; 
 
} 
 
.circle:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding-top: 100%; 
 
    height: 0; 
 
} 
 
.circle span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="circle"><span>8</span></div> 
 
<div class="circle"><span>64</span></div> 
 
<div class="circle"><span>512</span></div> 
 
<div class="circle"><span>4096</span></div>

Answer 2

ボーダー半径を使用してみてください：50％と設定し、最大幅と高さ

Answer 3

Hereは、あなたが動的にCSSの円を維持するためにどのように見ることができます簡単な例で、 js。

Jagjit Singhはhereを指摘しているので、固定ピクセル値の代わりにborder-radius: 50%;を使用して円を達成することができます。

Answer 4

これにはハックですが、すべての主要なブラウザの最新バージョンでは、チェックアウトのようですので、私はとにかくそれを投稿します。基本的な原則は、パーセントベースのパディング（上下のパディングも）が親の幅に対して相対的であることです。幅と高さが0の100%に設定すると、理論的には要素の高さが常に幅と等しいことになります。これを擬似要素と組み合わせると、マークアップを変更する必要はありません。私はflexboxを使ってコンテンツのセンタリングを修正しました。私がテストしたブラウザで動作するようですが、これはflexboxとdisplay:tableを使用しているため、最近のバージョンにはまったく依存しています。私はまた、それがあまりにも少ないコンテンツの形をしていないことを確認するためにmin-widthを追加しなければならなかった。

.circle { 
 
    background-color: red; 
 
    color: white; 
 
    text-align: center; 
 
    position: relative; 
 
    border-radius: 50%; 
 
    min-width: 1.25em; 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.circle:after { 
 
    content: ''; 
 
    padding-top: 100%; 
 
    display:table; 
 
}

<div class="circle">5</div> 
 
<br> 
 
<div class="circle">102</div> 
 
<br> 
 
<div class="circle">4298347918</div>