cssで中段表示する方法 上下左右中央に表示するcssの書き方divでも反映させちゃうぞ

2012-01-08_053805.jpg

スタイルシートを使って上下左右中央に文字や画像を表示したい!
けど、どうやるんだ? そんな疑問を解決したので忘れないように書いておこう!

テーブルタグを利用しているなら簡単な話だけれど、
なぜか、cssだと上手くいかない・・・そんな私でした。


ってことで、cssで上下左右中央に表示させる方法です。


まず、はじめにハマる罠1
http://blog-imgs-32.fc2.com/l/m/a/lmaker/dot.gif'); font-weight:bold; font-size:large;">vertical-align:middle;

普通なら、このcssの書き方で解決すると色んなサイトで書いてある。
しかし、これを利用する場合、決められたタグにしか反応しない。

つまり・・・
http://blog-imgs-32.fc2.com/l/m/a/lmaker/dot.gif'); font-weight:bold; font-size:large;"><div style="width:550px; height:200px;">
<span style="vertical-align:middle;">
これじゃ動かないということ・・・
</span>
</div>


ぁあ~ちょーめんどい!

ってことで、ボックス単位に指定してあげましょい!ということで
下記の方法。
http://blog-imgs-32.fc2.com/l/m/a/lmaker/dot.gif'); font-weight:bold; font-size:large;">line-height:200px;

この方法は、指定したエリア(ボックス)の文字間を指定する方法ですが、
高さ200pxのボックスなら文字間line-height:200px;とすれば中央に表示されるわけです!

やってみましょう!

普通に縦200pxの場合
http://blog-imgs-32.fc2.com/l/m/a/lmaker/dot.gif'); font-weight:bold; font-size:large;">cssで中央表示をがんばってみるぅー!



line-height:200px;行間指定を入れてみると・・・
http://blog-imgs-32.fc2.com/l/m/a/lmaker/dot.gif'); font-weight:bold; font-size:large;">cssで中央表示をがんばってみるぅー!


素敵ですよね?こんな感じなるけど、この方法はボックスに1行しかない事が重要です。
改行してしまうと変なことになります。

もし、「2行以上書くけど表示は中央がよろし!」という人は、
<span style="vertical-align:middle;">を使ってください・・・


でも、問題があるんです!


高さ幅などをdivで指定するとうまくいかない!
このvertical-align:middle;というのはspan / br / img / テーブルセル
などのタグにしか反応せずdivの要素は無視するようです。
divでも上下左右中央表示させるためには、display: table-cell;を追加するだけで おk でした!

http://blog-imgs-32.fc2.com/l/m/a/lmaker/dot.gif'); ">
cssで中央表示をがんばってみるぅー!
二行以上を実現したいならこれだ!ちなみに、コードは・・・
width:550px; height:200px; vertical-align:middle;
display: table-cell;
でも、IEだとちょっと上よりになる!


検証はFirefoxなんでIEは・・・どうなってるんだろ・・・
IEなんてなくなればいいのに・・・

やっぱりダメだったーーーーーーーーーーーーーーーーー!
(#゚Д゚)y-~~イライラ IEなんてなくなれ!!!
もう!ここまで来たら、IE対応にしてやるよ!

http://blog-imgs-32.fc2.com/l/m/a/lmaker/dot.gif'); width: 550px;height: 200px; font-size:large; font-weight:bold;display: table;">
できたー\(-o-)/<わーい

IE対応のために時間を無駄に消費した!
本当になくなればよい糞ブラウザNo1だな!!
コードは…めんどくさいよ・・・


IE対応上下左右中央表示するcssコードは下記です!
がんばりました!


http://blog-imgs-32.fc2.com/l/m/a/lmaker/dot.gif'); width: 530px;height: 200px; padding-right:10px; padding-left:10px; display: table;">
IE対応CSSコード!
<div style="width: 550px;height: 200px;display: table;">
<div style="display: table-cell;vertical-align: middle;text-align: center;width: 550px;/position: relative;/top: 50%;" >
<span style="/position: relative;/top: -50%;">
ここに文字とか画像入れたら中央表示になるばい!</span>
</div></div>


どうですか?うまくいってますか?たぶん大丈夫でしょ?
関連記事


【 忘却板/忘れた事を貼れます 】

コメント

高さ指定してたせいで小一時間悩まされたww
参考になりました!ありがとうございます!

できた!

いろいろ試したけど、ここので中央縦にでけた~!
ありがとうヽ(´∀`)ノ

ありがとうございます^^

ビルダーで悪戦苦闘の初心者ですが^^;
BLOGの説明文にぶち込んだリンク文字が
どうしてもセルの真ん中にこなくて
vertical-align:middle;
にもごっそりはまってましたがこちらを見させていただきなんとか。。。
って感じです。感謝ですmm

ありがとう

同じ悩みでした!中央にどうしてもこなくて。。解決しました!
CSSって難しい!
非公開コメント