2022.05.02 Web制作
【CSS】正円(レスポンシブ)の中央にテキストを配置する

レスポンシブ(画面サイズに影響されて楕円に歪まない)にて作った正円の上下左右中央に、テキストを配置する方法の紹介です。
改行が入っても問題ありません。
サンプルとソースコード
こちらをコピペで大丈夫です。円のサイズやパディングなどをお好みで。
See the Pen
by masakitano (@masakitano)
on CodePen.
複数の円を横に並べる
実際はこんな使い方が多いかなと思います。
円が3つほど横に並ぶ(画面幅に合わせて縦並び)レイアウト。
よくある”3つの特徴”みたいなコンテンツですね。
See the Pen
by masakitano (@masakitano)
on CodePen.