CSSのdivタグで円を描く方法

CSSのdivタグで円を描く方法

DIVタグなどのブロック要素でborder-radiusを50%で指定すれば、円を描けることが出来ます。

前提として、widthとheightは同じであることとなります。でないと楕円形になってしまいます。

上記は以下のように記述しています。

円を中央寄せで描く

divタグを中央寄せするにはmarginを使用します。

widthを指定したうえでmargin:0 auto;とすることで中央寄せすることが可能です。

marginについては「今更ながらCSSのmarginについて勉強してみました」を参照ください。

円を中央寄せで描く

先ほどはmarginを使用しましたが、今度は親要素、子要素で中央寄せしてみたいと思います。

円にはdisplay:inline-block;を指定します。

親要素にtext-align:center;を指定します。

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA