ど素人から毛を生やす。<延>

画像の上下左右中央揃えができないときの最終手段

Web > css 2014年12月5日(最終更新:2年前)

このページは2014.12.5に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。

この仕事始めて一年半弱。またコーディングで詰まりました。

 

従来の方法

さて、画像の上下中央揃えをしたいのですが、これにハマりました。
HTMLの方を自由に調整できるなら、以前の記事で書いたやり方をすれば堅実です。

親要素{
display:table;
}
子要素{
display:table-cell;
vertial-align:middle;
}
孫要素{
display:block;
margin:auto;
width:適当に;
height:適当に;
}
(又は子要素にtext-align:center、孫要素にdisplay:inline-blockでもok)

が、これができない場合がある。
既にコーディングが終わっているものを弄る場合、変にhtmlを弄るとスタイルが大幅に崩れる、なんてことはザラ。
できるだけCSSで済ませたいのに、親要素と子要素で終わってしまっていて、しかも子要素がimgタグなんかだったりするともうこの方法は使えません。

親要素{
line-height:親要素の高さと同じpx;
}
子要素{
vertical-align:middle
(display:inline-block;)
}

僕は最近までこの方法を使っていたのですが、これができるときできないときがあるのが悩みでした。
しかも、IEだと他ブラウザでできていてもできないときがある。

さて、今回も上述の方法を使っていたのですが、これが効かない。
親要素のline-heigthが上手く効いてくれない場合があるっぽいんですよね。
頭を抱えつつ色々調べてみたところ、なんと画期的な解決法を書かれていた方がいました!

 

新しい方法

親要素{
position:relative;
}
子要素{
position: absolute;
top: -100%;
left: -100%;
right: -100%;
bottom: -100%;
margin: auto;
width:適当に;
height:適当に;
}

え、こんな方法でできんの?というのが初見での率直な感想。
半信半疑でやってみたところ、見事上下左右中央揃えになるではないですか。凄ぇ。

しかもこれ、応用すれば左右中央下揃えとか、上下中央右揃えとか、色々できるらしい。
というのも、この現象はpositionとmarginの関係性が由来しているそうで…

 

どうしてこうなるのか

簡単に説明するなら、

margin:auto; では、左右は余白を均等に割り付けるが、上下はmargin:0;と同じになる。
しかしpositon:absolute; top等:0以外; を設定すると、上下左右ともにmarginは余白を均等に割り付ける。

ということだそうです。
つまるところ、上述のtop等の数値は同じなら何でも良いと言えます。

この辺詳しくは↓のサイト様を参照で。

 

参考サイト

今回のコードを教えてくださったサイトはこちら。
【バシャログ。】CSSでblock要素を上下左右中央寄せにする、イマドキの方法。

原理を解説してくださったサイトはこちら。
【WWW WATCH】position: absolute; の指定で要素が上下左右中央配置になる理由

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)