[解決済み】CSSで数字を丸で囲むには？
2022-03-30 23:35:14
質問
この画像のように、数字を丸で囲みたいのですが、どうすればいいですか？
これは可能なのでしょうか、またどのように実現するのでしょうか。
どのように解決するのですか？
ここで 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 を気にするのであれば 旧バージョン をご覧ください。
関連
-
[解決済み] Railsです。railsアプリで<img src= >をimage_tagに変換する方法
-
[解決済み] 電話番号のマークアップはどのように行うのですか？
-
[解決済み] Font Awesome アイコンをプレースホルダーで使用する
-
[解決済み] type="application/x-shockwave-flash "で表示可能な形式は？
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか？
-
[解決済み] CSSの親セレクタはありますか？
-
[解決済み] CSSでcellpaddingとcellspacingを設定する？
-
[解決済み] CSSでテキストや画像の背景を透明にするには？
-
[解決済み] CSSの三角形はどのように機能するのですか？
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ラジオボタンの代わりに画像を使用する
-
[解決済み] HTMLの#記号の文字実体は？
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] div に斜めのエッジを作成する [重複] 。
-
[解決済み] d3.tipが動作しないのはなぜですか？
-
[解決済み] ChromeのデベロッパーツールでHTML Bodyにcz-shortcut-listen="true "が表示される？
-
[解決済み] iFrameがURLを読み込んでいない
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] mailchimpのメールインラインスタイルのコーディングがいつも通りできない
-
[解決済み] htmlページで円を描くには？