Houn

2022.05.02 Web制作

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

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

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

サンプルとソースコード

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

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

複数の円を横に並べる

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

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

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

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

挫折しないWeb制作学習ならデイトラがお勧めです

8/31まで限定で、全コース1万円引きのキャンペーンを開催されています。

詳細は下記バナーをクリックして、公式サイトを覗いてみてください。

Share on SNSシェア

お問い合わせ