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

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

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

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

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

HTML

<!-- テキストが1行の場合 -->
<div class="circle">テキスト1行</div>

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

CSS

.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

<!-- テキストが2行の場合 -->
<div class="circle2">
    <p class="circle2-inner">テキスト2行です。</p>
</div>

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

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

CSS

.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で作成した円の中にテキストを入れる方法」でした。