皆様、こんばんは。
金澤です。
今日は背景画像の真ん中に文字を配置するやり方を。
横方向は左右のmarginをautoにしたり、
テキストの場合はtext-align:center;で表現できますが、
縦方向の中央揃えって
flexboxにしたり、
table-cellにしたりややこしいですね。
できるだけdisplayはいじりたくねーよ！
な、あなたに送ります。
目次
要素の高さ固定で、テキストが一行の時。
2パターンご用意いたしました。
こんな感じです。
１つ目は、背景画像の高さを、line-heightで調整しています。
2つ目は、要素に高さを指定している時。
この場合は要素の高さとline-heightを合わせることで中央に配置しています。
テキストが二行以上の時。
要素の高さが固定されている時は、こんな感じで揃えましょう。
複数行の場合line-heightで指定すると、
段落同士の距離が離れてしまうため、
padding-topで指定しましょう。
そしてpaddingを指定しても
要素自体の高さを変えないように、
box-sizing:border-box;
を忘れずに。
背景画像を可変に。そしてテキストは真ん中が良い。
スマホやタブレットデザインを作る際に、
要素の幅を％で指定することが多いと思いますが、
そんな時はこうしましょう。
これは背景画像を設定する要素に高さを指定しないというとこがミソですね。
そうすることによって、paddingで背景画像を画面幅に合わせて
拡大、縮小できます。
そしてpadding-topとpadding-bottomに
同じ数値を指定することによって
テキストは常に真ん中に配置されます。
paddingは％で指定し、背景画像の縦横比よって調節してみてください。
背景画像を設定した要素の縦横比を固定したまま可変させるやり方もまたアップしますね^^
参考になった方は是非シェアしてくださいね^ ^
センターでした！
