【CSS】コンテンツの上下左右中央寄せ

 

 
どうもMarumariです。

 

 

クッションページをつくったよ〜

 

この度は、クライアントの要望で別サイトへの誘導ページを設けることになりました。
よくアフィリ系や情報商材系のページで閉じようとすると、「本当に閉じていいですか?このお得なキャンペーンは〜〜〜」みたいに出てくるいわゆるクッションページってやつです。(正式名称はぐぐってもわかりませんでしたので、わかる方がいたらこっそーり教えてくださいw)
クッションページの作り方はcakePHPの解説9割になるので、今回は省きます。

 

その誘導ページのデザインが、他のページとは異なるデザインで・・・とのことでしたので、対応しましたよ!
使っているのは、cakePHPなので、誘導ページのViewを使用するときだけ、layoutを切り替えるため新しいlayoutも作成しました。
このlayoutの切り替え方も時間のあるときに説明します〜。

 

んで、作った結果、めちゃくちゃダサい表示になってしまって・・・・
こんな感じです。

 

 

badposition

 

 

さすがにこれはないな・・・と思って、よくあるのはページのど真ん中に表示されるかんじなので、それにしたほうがクライアントの要望にも近くなるのでは・・・と思って作ってみようとしました。
 

CSSでコンテンツを上下左右中央寄せで表示させる

 

ということで、コンテンツを上下左右中央寄せで表示させようと思いまして、【CSSで上下左右中央寄せにする方法】を参考にCSSいじいじしたわけですが、うまくいかなくて・・・。
原因は端的にいうと、widthとheightの値が任意の値ってなってたので何も指定していなかったため、コンテンツのwidthがページに対して100%になっていて上下左右中央寄せできていませんでした。

自分があほすぎて・・・www

なので、コンテンツにwidth:50%; heigh: 200px;をつけてあげたらちょうどいい具合にこんなふうに表示されるように!!!

 

 

goodposition

 

実際のいい感じのやつをお見せしたいんですが、大人の事情ってもので、イメージ図を表示させていただいております。

これでいい感じにすっきりしました〜!

 

 

まとめ

 

 
ただコンテンツを真ん中に表示させるだけだったら、margin: auto;でいけるけど、上下左右中央寄せは position:absoluteが一番手軽できれいですね。

 
注意が必要なのは、widthとheightをきちんと指定してあげること(autoも試みましたが、autoだと要素がページに対して100%で表示される様になっちゃって汚かった・・・)と、bodyの子要素に対してposition指定をする時以外は親要素にposition:relative; か position:absolute; を指定した上で、上下左右中央寄せしたい子要素に position:absolute; を指定してあげることですかね。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です