【CSS】円の中に2行の文字を書く

【CSS】円の中に2行の文字を書く

paddingで調整したコード

円の中に2行の文字を書きたいときがある。中央揃えにpaddingで調整したコードと、flex-boxを使った2種類のコードを載せておく。意外と実務でも使うことがあるのだ。

最初に作ったコードはコレだ。

See the Pen
丸に2行文字
by takasuke (@takasuke-sun)
on CodePen.

ローカル環境で見たときはきれいな円だったのだが、CodePenで見ると縦長の楕円に見えるのはなぜだろうか。

それはさておき、円の中の文字の表示位置はpadding で指定しており、若干危なげなコードである。まぁ、うまく表示されるならそれでいいのだが、flex-boxを使ったコードも作成してみよう。

flex-boxを使ったコード

See the Pen
丸に2行文字-flex
by takasuke (@takasuke-sun)
on CodePen.

おお。正円ですな。特に問題がなければflex-boxを使っていこう。

コメント

タイトルとURLをコピーしました