CSSで作成した円の中にテキストを入れる方法
今回は、「CSSで作成した円の中にテキストを入れる方法」について紹介します。
円の中のテキストが1行の場合と2行の場合の完成形はこちら。
See the Pen
Untitled by webis (@webis-co)
on CodePen.
円の中にテキストを表示する方法はよくWEBサイトで使われる手法なので、是非参考にしてみてください！
円の中のテキストが1行の場合
HTML
|
1 2 |
<!-- テキストが1行の場合 --> <div class="circle">テキスト1行</div> |
まず円を作るためにdivタグを用意します。
CSS
|
1 2 3 4 5 6 7 8 9 10 |
.circle { width: 150px; height: 150px; background-color: pink; border-radius: 50%; margin: 0 auto; text-align: center; line-height: 150px; font-size: 16px; } |
円の中に表示したいテキストが1行の場合は、高さと同じpxをline-heightにも同じように指定したらOKです。
上記のように高さが150pxならline-heightも同じ150pxを指定することで、上下中央にテキストが綺麗に表示されます。
円の中のテキストが2行の場合
HTML
|
1 2 3 4 |
<!-- テキストが2行の場合 --> <div class="circle2"> <p class="circle2-inner">テキスト2行です。</p> </div> |
円の中のテキストを2行にしたい場合は、円を作るdivタグの中にテキストタグを用意しましょう。
円とテキストを分離するイメージです。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.circle2 { position: relative; width: 150px; height: 150px; background-color: pink; border-radius: 50%; margin: 0 auto; text-align: center; } .circle2-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; line-height: 1.6; } |
circle2では円を作成するためのCSSを記述します。
そして、circle2-innerではpositionを使って、2行のテキストを円の中央で表示するようにします。
円とテキストを分離してCSSを記述することで、円の中で綺麗に2行のテキストが表示されるのです。
まとめ
以上が、「CSSで作成した円の中にテキストを入れる方法」でした。
