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