円形ボタンの中の複数行の文字列を上下中央寄せにする方法

未分類

2022.03.30

ボタンを円形にして尚且つ複数行の文字列を上下中央に寄せる方法をご紹介します。

結論
HTML
CSS(Sass表記)
結果
注意点

結論

そもそもボタンはaタグをinline-blockにして、幅と高さを指定して作るのが一般的だと思います。その場合

文字をspanタグで囲み、spanタグを絶対配置で上下中央に配置するパターン
aタグにdisplay:flex;を指定し、justify-content:center; align-items:center;を指定するパターン

があると思います。

HTML

 /* 1.のパターン */ <a class="button"><span>ボタンは<br>こちら7</span></a>

 /* 2.のパターン */ <a class="button">ボタンは<br>こちら</a>

CSS(Sass表記)

   /* 1.のパターン */

.button {
    display: inline-block;
    width: 140px;
    height: 140px;
    background: color.$color-main;
    border-radius: 50%;
    color: #fff;
    position: relative;
    text-align: center;
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
}

   /* 2.のパターン */

 .button {
    display: inline-block;
    width: 120px;
    height: 120px;
    color: #fff;
    background: color.$color-main;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

結果

注意点

今回は２行だったので、<br>を使い改行していますが、円の幅と高さによっては文字がうまく収まらない場合もあるので、その場合はfont-sizeを変更したり、円の幅と高さを調整すれば意図した通りに文字が収まると思います。