Houn

2021.07.30

Web制作メモ

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

レスポンシブ(画面サイズに影響されて楕円に歪まない)にて作った正円の上下左右中央に、テキストを配置する方法の紹介です。

改行が入っても問題ありません。

サンプルとソースコード

こちらをコピペで大丈夫です。円のサイズやパディングなどをお好みで。

See the Pen
by masakitano (@masakitano)
on CodePen.

複数の円を横に並べる

実際はこんな使い方が多いかなと思います。

円が3つほど横に並ぶ(画面幅に合わせて縦並び)レイアウト。

よくある”3つの特徴”みたいなコンテンツですね。

See the Pen
by masakitano (@masakitano)
on CodePen.

Share on SNSシェア

Related 関連記事

お問い合わせ