CSSで作成した円の中にテキストを入れる方法

今回は、「CSSで作成した円の中にテキストを入れる方法」について紹介します。

円の中のテキストが1行の場合と2行の場合の完成形はこちら。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

円の中にテキストを表示する方法はよくWEBサイトで使われる手法なので、是非参考にしてみてください!

円の中のテキストが1行の場合

HTML

まず円を作るためにdivタグを用意します。

CSS

円の中に表示したいテキストが1行の場合は、高さと同じpxをline-heightにも同じように指定したらOKです。

上記のように高さが150pxならline-heightも同じ150pxを指定することで、上下中央にテキストが綺麗に表示されます。

円の中のテキストが2行の場合

HTML

円の中のテキストを2行にしたい場合は、円を作るdivタグの中にテキストタグを用意しましょう。

円とテキストを分離するイメージです。

CSS

circle2では円を作成するためのCSSを記述します。

そして、circle2-innerではpositionを使って、2行のテキストを円の中央で表示するようにします。

円とテキストを分離してCSSを記述することで、円の中で綺麗に2行のテキストが表示されるのです。

まとめ

以上が、「CSSで作成した円の中にテキストを入れる方法」でした。

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事