CSSを使用して数字を円で囲む方法は？

250

この画像のように、数字を円で囲みます。

サークル画像の番号

これは可能ですか？それはどのように達成されますか？

html  css  css-shapes 
— ペンティアム10
ソース

回答:

442

ここだJSFiddle上のデモとスニペットは：

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}
<div class="numberCircle">30</div>
スニペットを展開

私の回答は良い出発点です。他の回答のいくつかは、さまざまな状況に柔軟に対応できます。IE8に関心がある場合は、私の古いバージョンの答えを見てください。

— 三十点
ソース
Internet Explorerの現在の最新バージョンである9は、実際にはborder-radiusをサポートしています。...そしてdivはこれに適した選択肢ではありません。:)
— reisio 2012
7
表示：インラインブロック;
— カークランド2013年
1
@KyleMit：理論的には、それは良い考えです。残念ながら、CSS3 PIEには同じドメインの制限があります。
— thirtydot 2014年
3
フォントサイズを変更するたびにCSSで数学を実行する必要がないようにするため（たとえば、レスポンシブデザインを行う場合の手間）、フォントサイズを記述するためにピクセルのみを使用する30ドットのjsfiddleのこの適応を使用できます：jsfiddle。 net / dQR9T / 7058
— Steven
1
確実にするためにどのよう@steven 円は数の周りに常にある、または数が24928であれば、我々は、円を大きくすることができ、それが今溢れた
— トランス
108

ここでの他のほとんどの回答の問題は、外側のコンテナーのサイズを微調整して、表示されるフォントサイズと文字数に基づいて最適なサイズになるようにする必要があることです。1桁の数字と4桁の数字を混在させている場合、機能しません。フォントサイズと円のサイズの比率が完全でない場合は、楕円形になるか、大きな円の上部に縦に並んだ小さな数字が表示されます。これは、任意の量のテキストと任意のサイズの円で正常に機能するはずです。widthとline-heightを同じ値に設定するだけです。

.numberCircle {
    width: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    border: 2px solid #666;
}
<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>
スニペットを展開

コンテンツを長くしたり短くしたりする必要がある場合は、コンテナの幅を調整して、より適切に合わせることができます。

JSFiddleで確認してください。

— マイク
ソース
それはまさに私が抱えていた問題であり、「1」、「10」、または「100」である可能性がある内部のパーセンテージを示しています。これは完璧に動作します、ありがとう！
— フェリペカストロ
なお、この提案編集が拒否されましたが、私は手動で答えにそれらを追加しましたので、変更は実際に、垂直方向に少し良くテキストを中央に配置します。
— マイク
これがより良い答えです。マイナスの上マージンの代わりに、translateY（-50％）を使用します
— Tobias
@Tobias素晴らしいアイデアをありがとう。回答を更新しました。
— Mike、
スパンを削除し、divにtext-alignand line-heightを追加する方がはるかにクリーンです。それでもおそらく最良の答えです。
— dlsso 2017年
41

コンテンツに基づいて変化する円のサイズの場合、これは機能するはずです。

http://jsfiddle.net/nzsnw55s/

<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>

.numberCircle {
  display:inline-block;
  line-height:0px;

  border-radius:50%;
  border:2px solid;

  font-size:32px;
}

.numberCircle span {
  display:inline-block;

  padding-top:50%;
  padding-bottom:50%;

  margin-left:8px;
  margin-right:8px;
}

コンテンツの幅とmargin-を使用して半径を決定し、次にを使用して高さを拡張して一致させpadding-ます。のmargin-フォントサイズに基づいて調整する必要があります。

内部要素を削除するための更新：

<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>

<style type="text/css">
.numberCircle {
    display:inline-block;

    border-radius:50%;
    border:2px solid;

    font-size:32px;
}

.numberCircle:before,
.numberCircle:after {
    content:'\200B';
    display:inline-block;
    line-height:0px;

    padding-top:50%;
    padding-bottom:50%;
}

.numberCircle:before {
    padding-left:8px;
}
.numberCircle:after {
    padding-right:8px;
}
</style>

擬似要素を使用して高さを強制します。垂直方向の配置には、ゼロ幅のスペースが必要です。をline-height:0px外部から疑似に移動して、IE8の低下時に少なくとも表示されるようにしました。

— ryachza
ソース
5
私にとって、これは最良の解決策でした。より大きな数を許可し、最もスケーラブルです。他のすべてのソリューションは、サイズのコーディングが多すぎます。これは最小です。フォントサイズはこれを壊すことなくかなり変更することができます。大幅に変更する場合、マージンを調整する必要がありますが、それは非常に寛容です。ただし、ネストされた要素を使用する必要があることは、いくらか否定的です。
— Necreaux
@Necreaux回答を、明示的な内部要素を疑似要素に置き換えるバージョンに更新しました。
— ryachza 2016
1
確かに最高のソリューション。margin-leftとmargin-rightのサイズを8pxではなく0.35emに置き換えました（更新されたソリューションのパディング）。そのため、フォントサイズを変更し、適切なマージンを確保できます。
— ジバト
25

最も簡単な方法は、ブートストラップとバッジクラスを使用することです

 <span class="badge">1</span>
— Navid
ソース
4
これは素晴らしい！私はすでにブートストラップを使用していますが、このクラスが存在することを知りませんでした。
— ジャスティン
1
ナイスな回答navid！
— SeyedPooya Soofbaf 2017
22

このバージョンでは、ハードコードされ、固定値に依存しているだけに相対的なサイズはありませんfont-sizeのdiv。

http://jsfiddle.net/qod1vstv/

ここに画像の説明を入力してください

CSS：

.numberCircle {
    font: 32px Arial, sans-serif;

    width: 2em;
    height: 2em;
    box-sizing: initial;

    background: #fff;
    border: 0.1em solid #666;
    color: #666;
    text-align: center;
    border-radius: 50%;    

    line-height: 2em;
    box-sizing: content-box;   
}

HTML：

<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>
— ヴォルフガング・チーグラー
ソース
1
こんにちはこれは非常にいいですが、数が大きい場合は、100や1000であっても、円の外にスクロールします。また、フォントのサイズを使用して新しい背景色を作成することは可能でしょうか
— トランスフォーマー
1
美しいソリューション！
— jomofrodo
8

これにはborder-radiusを使用できます。

<html>
  <head>
    <style type="text/css">

    .round
    {
        -moz-border-radius: 15px;
        border-radius: 15px;
        padding: 5px;
        border: 1px solid #000;
    }

  </style>
  </head>  
  <body>   
    <span class="round">30</span>
  </body>
</html>

結果に満足するまで、境界線の半径とパディング値を試してください。

ただし、これはすべてのブラウザで機能するわけではありません。IEはまだ丸みを帯びた角をサポートしていないと思います。

— カヤー
ソース
`また、IE用の修正プログラムがあり、15ピクセル：` -webkit-ボーダー半径を忘れてはいけないhtmlremix.com/css/curved-corner-border-radius-cross-browserはそれを実装する考え直す
— ハンネス
+1おそらく最も簡単な方法です... IEのフォールバックも問題ありません（正方形）。私が思い出すと、ワードプレスはこのようにします
— ロス
4

ここでの私の解決策-これは、さまざまなサイズと色を容易に考慮し、編集制御のためにCMSに結び付けます。正方形に低下するIEの場合。

HTML：

<div class="circular-label label-outer label-size-large label-color-pink">
    <div class="label-inner"> 
        <span>Fashion & Beauty</span>
    </div>
</div>

CSS：

.circular-label {
    overflow: hidden;
    z-index: 100;
    vertical-align: middle;
    font-size: 11px;
    -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
    width: 85%;
    height: 85%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px dotted white;
    vertical-align: middle;
    margin: auto;
    top: 5%;
    position: relative;
    overflow: hidden;
}
.label-inner > span {
    display: table;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    position: absolute;
    margin: auto;
    margin-top: 38%;
    font-family:'ProximaNovaLtSemibold';
    font-size: 13px;
    line-height: 1.0em;
}
.circular-label.label-size-large {
    width: 110px;
    height: 110px;
    -moz-border-radius: 55px;
    -webkit-border-radius: 55px;
    border-radius: 55px;
    margin-top:-55px;
}
.circular-label.label-size-med {
    width: 76px;
    height: 76px;
    -moz-border-radius: 38px;
    -webkit-border-radius: 38px;
    border-radius: 38px;
    margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
    margin-top: 33%;
}
.circular-label.label-size-small {
    width: 66px;
    height: 66px;
    -moz-border-radius: 33px;
    -webkit-border-radius: 33px;
    border-radius: 33px;
    margin-top:-33px;
}

これを行う方法を確認することはそれほど難しくありません。より大きな問題は、円スケールの寸法をコンテンツに合わせることができるかどうかです。

現在、それは可能ではないと思います。誰でも？

— Bearinthewoods
ソース
3

パーティーには遅れましたが、これは私にとってはうまくいったブートストラップのみのソリューションです。私はBootstrap 4を使用しています：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>
スニペットを展開

基本的に、bg-dark text-white rounded-circle px-3 py-1 mx-2 h3クラスを自分の<span>（または何でも）要素に追加すれば完了です。

コンテンツに複数の数字がある場合は、マージンとパディングクラスを調整する必要がある場合があることに注意してください。

— dotNET
ソース
2

あなたは標準のブロック、つまり正方形のように働きます

.circle {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }

これはCSS 3の機能であり、あまりサポートされていません。FirefoxとSafariは確かに期待できます。 

<div class="circle"><span>1234</span></div>
— ダミアン・レスチェンスキー-ヴァシュ
ソース
2

HTMLの例

<h3><span class="numberCircle">1</span> Regiones del Interior</h3>

コード

    .numberCircle { 

    border-radius:50%;
    width:40px;
    height:40px;
    display:block;
    float:left;
    border:2px solid #000000;
    color:#000000;
    text-align:center;
    margin-right:5px;

}
— レオナルドベガ
ソース
このコードは便利ですが、説明を付けておくとよいでしょう
— mhatch
2

パーティーには遅れましたが、私がhttps://codepen.io/jnbruno/pen/vNpPpWで行った解決策を次に示します

CSS：

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

html：

<div class="panel-body">
                            <h4>Normal Circle Buttons</h4>
                            <button type="button" class="btn btn-default btn-circle"><i class="fa fa-check"></i>
                            </button>
                            <button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i>
                            </button>
</div>

追加の作業は必要ありません。おかげでジョンノエルブルーノ

— Dt23
ソース
ジョンノエルブルーノとは ブログやチュートリアルから入手した場合、リンクを提供することはプラスです
— Dush
1

あなたのCSSでこのようなことをしてください

 div {
    幅：10em; 高さ：10em;
    -webkit-border-radius：5em; -moz-border-radius：5em;
  }
  p {
    text-align：中央; margin-top：4.5em;
  }

段落タグを使用してテキストを記述します。それが役に立てば幸い

— 1000日
ソース
1

ここで私がしたことのような何かが機能する可能性があります（0から99まで）：

CSS： 

.circle {
    border: 0.1em solid grey;
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
}

.circle p {
    margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    color: grey;
}

HTML： 

<body>
    <div class="circle"><p>30</p></div>
</body>
— jstol
ソース
1

最初の答えを改善するには、パディングを削除して追加line-heightしてvertical-alignください：

.numberCircle {
   border-radius: 50%;       

   width: 36px;
   height: 36px;
   line-height: 36px;
   vertical-align:middle;

   background: #fff;
   border: 2px solid #666;
   color: #666;

   text-align: center;
   font: 32px Arial, sans-serif;
}
— Hubyx Reds
ソース
1

二乗法を使用した私のやり方はこちらです。利点は、さまざまな値で機能しますが、2つのスパンが必要です。

.circle {
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  padding: 5px;
}
.circle::after {
  content: '';
  display: block;
  padding-bottom: 100%;
  height: 0;
  opacity: 0;
}
.num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.width_holder {
  display: block;
  height: 0;
  overflow: hidden;
}
<div class="circle">
  <span class="width_holder">1</span>
  <span class="num">1</span>
</div>
<div class="circle">
  <span class="width_holder">11</span>
  <span class="num">11</span>
</div>
<div class="circle">
  <span class="width_holder">11111</span>
  <span class="num">11111</span>
</div>
<div class="circle">
  <span class="width_holder">11111111</span>
  <span class="num">11111111</span>
</div>
スニペットを展開

— クリス・リー
ソース
0

thirtydotの答えは正しいですが、少し点が欠けています。位置を追加する必要があります：円の中央に値を設定し、異なる範囲の数値も含める場合は、relativeです。たとえば123;

HTML：

<div class="numberCircle">30</div>

CSS：

.numberCircle {    

border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;

font: 32px Arial, sans-serif;
}

しかし、最も簡単な解決策は、ブートストラップを使用することです

<span class="badge" style ="float:right">123</span>

— マルコ・マッジョッティ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.