☰

中央にテキストがある円を描くにはどうすればいいですか? 質問する

tag-icon • tag-icon css css-shapes
中央にテキストがある円を描くにはどうすればいいですか? 質問する

stackoverflowでこの例を見つけました:

CSS のみを使用して円を描く

それは素晴らしいですね。しかし、円の中央にテキストを含めることができるように、この例を変更する方法を知りたいです。

これも見つけました:CSS で円内のテキストを垂直方向と水平方向に中央揃えする (iPhone の通知バッジのように)

しかし、何らかの理由で、私の環境では動作しません。次のテスト コードを作成すると:

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

円ではなく、楕円形になります。コードを試してみて、どのように動作するかを確認しようとしています。

ベストアンサー1

line-heightdiv の高さと同じ値を設定すると、1 行のテキストが垂直方向に中央揃えで表示されます。この例では、高さと行の高さは 500 ピクセルです。

例

JSFiddle

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}
<div class="circle">Hello I am A Circle</div>

おすすめ記事