【css】高さが可変する要素の上下左右の真ん中にテキストを配置してみる。

【css】高さが可変する要素の上下左右の真ん中にテキストを配置してみる。

皆様、こんばんは。

金澤です。

今日は背景画像の真ん中に文字を配置するやり方を。

横方向は左右のmarginをautoにしたり、

テキストの場合はtext-align:center;で表現できますが、

縦方向の中央揃えって

flexboxにしたり、

table-cellにしたりややこしいですね。

できるだけdisplayはいじりたくねーよ!

な、あなたに送ります。

要素の高さ固定で、テキストが一行の時。

2パターンご用意いたしました。

こんな感じです。

1つ目は、背景画像の高さを、line-heightで調整しています。

2つ目は、要素に高さを指定している時。

この場合は要素の高さとline-heightを合わせることで中央に配置しています。

テキストが二行以上の時。

要素の高さが固定されている時は、こんな感じで揃えましょう。

複数行の場合line-heightで指定すると、

段落同士の距離が離れてしまうため、

padding-topで指定しましょう。

そしてpaddingを指定しても

要素自体の高さを変えないように、

box-sizing:border-box;

を忘れずに。

背景画像を可変に。そしてテキストは真ん中が良い。

スマホやタブレットデザインを作る際に、

要素の幅を%で指定することが多いと思いますが、

そんな時はこうしましょう。

これは背景画像を設定する要素に高さを指定しないというとこがミソですね。

そうすることによって、paddingで背景画像を画面幅に合わせて

拡大、縮小できます。

そしてpadding-topとpadding-bottomに

同じ数値を指定することによって

テキストは常に真ん中に配置されます。

paddingは%で指定し、背景画像の縦横比よって調節してみてください。

背景画像を設定した要素の縦横比を固定したまま可変させるやり方もまたアップしますね^^

参考になった方は是非シェアしてくださいね^ ^

センターでした!

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

コーダー

yu.kanazawa

シンガー、俳優とクリエイティブな活動をしながら、アルバイト、会社員、ニート、個人事業主経て株式会社awesomeに所属。関わる人に楽しさを提供する事を信条に掲げ、0ベースからビジネスを創れるように、奮闘中です。

他の投稿を見る →