CSS で作成した円内でテキストを中央に配置するにはどうすればよいですか?

中央に配置されたテキストを含めるように CSS 円を変更する

CSS のみを使用して円を描画する例が見つかりました。ただし、中央にテキストを含めるように変更しようとしています。

まず、次の解決策を試してください:

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

残念ながら、これにより、楕円形ではなく楕円形が生成される可能性があります。

解決策

垂直方向に中央揃えにするテキストの場合は、line-height を div の高さと同じ値に設定します。上の例では、高さと行の高さは両方とも 500px に設定されています。

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px; /* Vertically center the text */
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000;
}

この変更により、テキストが円内の中央に表示されるようになります。

以上がCSS で作成した円内でテキストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。