円形の CSS 枠線内でテキストを完全に中央に配置するにはどうすればよいですか?

円形の境界線内のテキストを中央揃えにする

Web 要素の視覚的な魅力を高めるには、形状のカスタマイズが必要になる場合があります。一般的なデザイン パターンは、テキストを中央に配置した円を作成することです。この記事では、まさにそれを実現するための CSS ベースのソリューションについて説明します。

独自のアプローチと落とし穴

一般的なアプローチの 1 つは、CSS のみを使用して円を描くことです。この方法は基本的なフレームワークを提供しますが、中央にテキストを追加するのは難しい場合があります。既存の解決策を使用して円内でテキストを垂直方向の中央に配置しようとすると、きれいな円ではなく楕円形になる可能性があります。

解決策: 行の高さを調整する

円内のテキストを完全に中央に配置するには、line-height プロパティをコンテナ div の高さと同じ値に設定します。これを行うと、テキストが円の中心で垂直に配置されます。

実装例

実装を示す例は次のとおりです:

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;  <!-- Adjusts vertical text alignment -->
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}

<div class="circle">Hello I am A Circle</div>

この例では、コンテナ div の幅と高さは 500 ピクセルです。行の高さも 500 ピクセルに設定されており、テキストが垂直方向の中央に配置されます。これにより、テキストが中央にきちんと配置された完全な円形が得られます。

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