コーディング /

jQueryで要素を上下中央に配置する方法(IE8対応)

「要素を画面の上下中央に配置したいのに、上手くいかない…」、そんな状況に陥ったことがある人も多いのではないでしょうか? 今回ご紹介するのは、“要素の高さが決まっていない”、“IE8にも対応させたい”という場合に使えるjQueryを用いた方法です。 基本的なhtmlとcssは以下です。 html css divの高さが決まっている時は、“margin-top”に高さの半分のネガティブマージンを指定すれば上下中央になります。(例:divの高さが100pxなら、“margin-top:-50px”) 高さが決まっていない時でも、下記のようにjQueryで要素の高さを取得して、cssにネガティブマージンを代入すれば上下中央にすることができます。 javascript その他、cssだけで配置する方法も状況別に3つご紹介します。

CSSで要素を上下中央に配置する方法


・ブロック要素内のインライン要素を中央配置したい場合

上下中央に配置したい要素がインライン要素の場合は、”display:table-cell”をうまく使いましょう。 “vertical-align:middle”はインライン要素テーブルセルにしか適用されません。 やってしまいがちなのが下記のようなブロック要素への指定です。 html css ブロック要素のままでは”vertical-align”が効かないので、”display:table-cell”でテーブルセルに指定しましょう。 css

・要素の高さが決まっているブロック要素自体を中央配置したい場合

要素の高さが決まっているときは、冒頭で述べたように”margin-top”に高さの半分のネガティブマージンを指定すれば上下中央に配置することができます。 html css

・要素の高さが決まっていないブロック要素自体を中央配置したい場合

こちらはcss3を使った方法なので、IE8は未対応です。 「vh」とは「viewport height」の略で、100vh=ブラウザの高さとなります。 html css いかがでしょうか? 数値が決まっていない場合でも、jQueryを使えば簡単に取得することができます!他の場面にも応用できると思いますので、ぜひ試してみてください。

この記事を書いた人

永渕百合子

PAGE TOP