html - CSSを使用して数値を円で囲むにはどうすればよいですか？

Question

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

サークル画像の番号

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

score 513 · Accepted Answer

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が気になる場合は、私の答えの古いバージョンを見てください。

score 141 · Accepted Answer

ここでの他のほとんどの回答の問題は、フォントサイズと表示される文字数に基づいて最適なサイズになるように、外部コンテナのサイズを微調整する必要があることです。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でご覧ください。

score 58 · Accepted Answer

20以下の場合は、Unicode文字を使用できます①②...⑳</ p>

http://www.alanwood.net/unicode/enclosed_alphanumerics.html

score 51 · Accepted Answer

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

.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;
}

<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>

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

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

.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;
}

<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>

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

score 30 · Accepted Answer

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

 <span class="badge">1</span>

score 27 · Accepted Answer

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>

score 10 · Accepted Answer

これには、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はまだ丸みを帯びた角をサポートしていないと思います。

score 5 · Accepted Answer

パーティーに遅れましたが、これが私のために働いたブートストラップのみのソリューションです。Bootstrap4を使用しています。

<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>すれば完了です。

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

score 5 · Accepted Answer

誰も使用flexしていないので、わかりやすいので驚いたので、ここに私のバージョンの回答を入れました。

円を作成するには、width等しいことを確認してくださいheight
font-size円内の数に適応するには、emではなくを使用しますpx
数値を円の中央に配置するには、flexを使用してjustify-content: center; align-items: center;
数が増える場合（たとえば> 1000）、width同時にheight増やす

次に例を示します。

.circled-number {
  color: #666;
  border: 2px solid #666;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em; 
  height: 2em;
}

.circled-number--big {
  color: #666;
  border: 2px solid #666;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4em; 
  height: 4em;
}

<div class="circled-number">
  30
</div>

<div class="circled-number--big">
  3000000
</div>

score 4 · Accepted Answer

ここでの私の解決策-これにより、さまざまなサイズと色を簡単に作成し、編集制御のために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;
}

これを行う方法を理解することはそれほど難しくありません。より大きな問題は、円の寸法をコンテンツに合わせて拡大縮小できるかどうかです。

現在、それは不可能だと思います。誰？

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

余分な作業は必要ありません。ありがとうジョンノエルブルーノ

.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;
}

<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>

score 1 · Accepted Answer

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

div {
    幅：10em; 高さ：10em;
    -webkit-border-radius：5em; -moz-border-radius：5em;
  }
  p {
    text-align：center; マージントップ：4.5em;
  }

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

score 1 · Accepted Answer

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

これはCSS3の機能であり、あまりサポートされていません。FirefoxとSafariを確実に信頼できます。

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

<div class="circle"><span>1234</span></div>

score 1 · Accepted Answer

このようなものが機能する可能性があります（0から99までの数字の場合）：

.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;
}

<body>
  <div class="circle">
    <p>30</p>
  </div>
</body>

score 1 · Accepted Answer

最初の答えを改善するには、パディングを取り除き、追加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;
}

score 1 · Accepted Answer

正方形の方法を使用して、これを行う私の方法は次のとおりです。利点は、さまざまな値で機能することですが、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>

score 1 · Accepted Answer

JSFiddleのデモとスニペットは次のとおりです。

/* Creating a number within a circle using CSS */

.numberCircle {
    font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 0px;
    border-radius: 50%;
    font-size: 12px;
    min-width: 38px;
    min-height: 38px;
}

.numberCircle span {
    display: inline-block;
    padding-top: 50%;
    padding-bottom: 50%;
    margin-left: 1px;
    margin-right: 1px;
}

/* Some Back Ground Colors */
.clrGreen {
    background: #51a529;
}
.clrRose {
    background: #e6568b;
}
.clrOrange {
    background: #ec8234;
}
.clrBlueciel {
    background: #21adfc;
}
.clrMauve {
    background: #7b5d99;
}

<span class="numberCircle clrGreen"><span>8</span></span>
<span class="numberCircle clrRose"><span>80</span></span>
<span class="numberCircle clrOrange"><span>800</span></span>
<span class="numberCircle clrMauve"><span>8000</span></span>

score 0 · Accepted Answer

30ドットの答えは正しいですが、少しポイントが欠けています。円の中心に値を設定し、さまざまな範囲の数値も含める場合は、位置を追加する必要があります：相対。たとえば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;
}

しかし、最も簡単な解決策はBootstrapを使用することです

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

score 0 · Accepted Answer

使用できます

span.red {
    background: red;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.grey {
    background: #cccccc;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.green {
    background: #5EA226;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.blue {
    background: #5178D0;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.pink {
    background: #EF0BD8;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

    <h1><span class="grey">1</span>A grey circle with number inside</h1>
    <h1><span class="red">2</span>A red circle with number inside</h1>
    <h1><span class="blue">3</span>A blue circle with number inside</h1>
    <h1><span class="green">4</span>A green circle with number inside</h1>
    <h1><span class="pink">5</span>A pink circle with number inside</h1>

https://wpsites.net/web-design/colored-numbered-circles-using-pure-css-html/に感謝します

html - CSSを使用して数値を円で囲むにはどうすればよいですか？

20 に答える 20

Related

Reference