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

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

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

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)