stackoverflowでこの例を見つけました。
https://stackoverflow.com/questions/6936972/draw-circle-using-css-alone
これは素晴らしいですね。 しかし、この例を修正して、円の真ん中にテキストを入れられるようにする方法を知りたいのですが。
また、次のようなものも見つけました: https://stackoverflow.com/questions/4801181/vertically-and-horizontally-centering-text-in-circle-in-css-like-iphone-notific
しかし、なぜか私にはうまくいきません。 以下のテストコードを作成すると
<div class="badge">1</div>
円ではなく、楕円形になってしまいます。 どうしたらうまくいくか、コードをいじってみています'。
もちろん、そのためにはいくつかのタグを使う必要があります。一つは円を作るため、もう一つはテキストを作るためです。
以下のコードが参考になるでしょう。
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
color:black;
}
.innerTEXT{
position:absolute;
top:80px;
left:60px;
}
<div id="circle">
<span class="innerTEXT"> Here a text</span>
</div>
実例はこちら http://jsbin.com/apumik/1/edit
更新情報
いくつかの変更を加えてより小さくしたものがこちら