CSSで円(丸)を描き、その中心に文字を配置する方法

CSSで円を描く方法をご紹介します。円形を盛り込みたいけど、画像を作るのは面倒という時に使えます。

CSSで円を描く方法

CSSで円を描くには、要素のwidthとheightを指定して、border-radius:50%を指定します。

html

<div class="circle"></div>
<a class="circle-2"></a>

CSS

.circle{
   width:100px;
   height:100px;
   border-radius:50%;
   background:pink;
}
.circle-2{
   display:inline-block; /*<a>タグはインライン要素なのでinline-blockを指定*/
   width:100px;
   height:100px;
   border-radius:50%;
   background:pink;
}

※<a>タグや<span>タグなどインライン要素のタグには、横幅（width）と高さ（height）の指定が効かないため、display:inline-blockでブロック要素にして指定できるようにします。

これで80px×80pxの正方形ができました。

枠線のみの円にする方法

背景無し・枠線のみの円にする場合は、backgroundの代わりにborderを指定すれば作れます。

CSS

.circle{
   width:100px;
   height:100px;
   border-radius:50%;
   border:2px solid pink;
}

CSSで円の中央に文字を配置する方法

① display:flexで中央配置

文字をCSSで円の中に中央配置するにはdisplay:flexを指定するのが便利です。

html

<div class="circle"><p> ABOUT <br>ME</p> </div>

CSS

.circle{
   width:100px;
   height:100px;
   border-radius:50%;
   background:pink;

   /*display:flexで中央配置*/
   display:flex;
   align-items:center;
   justify-content:center;
}

円の要素に、display:flexを指定して縦方向の中央配置を指定するjustify-content 、横方向の配置を指定するalign-items でcenterを指定すれば中央に配置されます。

テキストが１行の場合でも同様に中央配置されます。また、あまり無いかもしれませんが中央配置にはしたいが中央揃えしたくないというケースでも対応可能なので、こちらの方法の方が使いやすいかと思います。

また、テキスト自体を中央揃えにしたい場合はtext-align:centerも指定します。

② line-heightとtext-alignで中央配置（文字が１行の場合のみ）

入れる文字が１行の場合はtext-alignとline-heightを指定する形でも中央配置できます。

html

<div class="circle"><p> ABOUT </p> </div>

CSS

.circle{
   width:100px;
   height:100px;
   border-radius:50%;
   background:pink;
}
p{
   text-align:center;
   line-height:100px;
}

<p>タグに、横並びで中央に配置するtext-align:centerを指定し、line-heightで縦幅と同様の100pxを指定すれば中央配置されます。

テキストが２行以上の場合は、この方法だとline-heightを指定しているために上の１行は中央に配置されますが下の１行がはみ出してしまいます。