読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

CSSで円のセンターにテキストを配置する

昔一度投稿した気がしなくもないんですが、見つからなかったので投稿しておきます。
テキストをDOMに対し上下左右中央寄せしたい場合はわりと頻繁に出てきますが、そのDOMが円だった際の対策です。

円の外接四角形に対しテキストを上下左右中央寄せすると行数によってははみ出してしまうため、
内接四角形に対して上下左右中央寄せするのがおすすめです。
今回はSCSSで内接四角形を計算し、センタリングを行いました。


HTML

<div class="circle"><!--円-->
  <div class="inner"><!--内接四角形-->
    <div class="box">
      <div contenteditable="true" class="txt">HELLO WORLD</div>
    </div>
  </div>
</div>

SCSS

%circle {
  $size : 300px; // 円の直径
  // border: solid #000 1px; // 今回は線を引かなかったためコメントアウト
  border-radius: 50%;
  width: $size; height: $size;

  .inner { // 内接四角形
    margin: ($size - $size / 1.41) / 2;
    width: $size / 1.41; height: $size / 1.41;
    overflow: hidden;
  }

  .box {
    display: table;
    width: 100%; height: 100%;
  }

  .txt {
    display: table-cell;
    width: 100%; height: 100%;
    text-align: center;
    vertical-align: middle;
    
    &:focus {
      outline: none;
    }
  }
}

DEMO

See the Pen Text in the circle by kimmy (@kimmy) on CodePen.

背景をほんのりおしゃれにする技 をつかったらおしゃれになりすぎて本質がぶれたような気もしますが、DEMOはこんな感じです。
テキストエリアをクリックするとテキストを編集できるので、是非ともいろんな文字数を試してみてください。


kimizuka.hatenablog.com