今回は、「CSSで円の中にテキストを表示する方法」について。
テキストが1行の場合と2行の場合の2パターンについて紹介していきます。
【CSS】円の中にテキストを表示する方法
完成形はこちらです。
テキストが1行の場合と、2行の場合の円が2つあるのがわかると思います。
それでは早速コーディングしていきましょう！
HTML
<!-- テキストが1行の場合 -->
<div class="circle">
<p>テキスト</p>
</div>
<!-- テキストが2行の場合 -->
<div class="circle2">
<p>
テキスト<br>テキスト
</p>
</div>
テキストが1行の場合は、まず親要素にクラスをつけて中にpタグでテキストを入れます。
次にテキストが2行の場合はも親要素にクラスをつけ、中のテキストであるpタグの途中で「br」の改行タグを入れてあげます。
そうすることでテキストが2行になりますよ。
CSS
.circle {
text-align: center;
margin: 0 auto;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
margin-bottom: 50px;
background-color: red;
color: #fff;
}
.circle2 {
margin: 0 auto;
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: red;
color: #fff;
line-height: 1.5;
}
◎1行目〜11行目
「text-align: center;」でテキストを中央寄せにし、「margin: 0 auto;」で全体的に円を真ん中にします。
そして「width: 100px;」と「height: 100px;」で円のサイズをつけます。
テキストが1行の場合はline-heightを指定して、数値をheightの高さと合わせたらテキストが上下中央寄せになります。
なので、今回は「line-height: 100px;」を指定すればOK。
「border-radius: 50%;」で円を丸くします。
◎13行目〜24行目
基本的なサイズや色などのスタイルは、circleクラスと一緒です。
しかし、テキストが2行の場合にline-heightを指定すると、2行目のテキストが円からはみ出てしまいます。
テキストを2行にしたい場合は、
display: flex; align-items: center; justify-content: center;
の3つのプロパティを指定することで、2行でもテキストが上下中央寄せになるのです。
まとめ
以上が、「CSSで円の中にテキストを表示する方法」でした。
是非真似してコーディングしてみてください。
