ローディング中

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

center_text

皆様、こんばんは。

金澤です。

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

横方向は左右の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は%で指定し、背景画像の縦横比よって調節してみてください。

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

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

センターでした!

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.