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

Posted by boukyaku on 08.2012 ホームページ制作の謎   4 comments   0 trackback
  • このエントリーをはてなブックマークに追加
    2012-01-08_053805.jpg

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

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


    ってことで、cssで上下左右中央に表示させる方法です。
    [スポンサードリンク]


    まず、はじめにハマる罠1
    vertical-align:middle;

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

    つまり・・・
    <div style="width:550px; height:200px;">
    <span style="vertical-align:middle;">
    これじゃ動かないということ・・・
    </span>
    </div>


    ぁあ~ちょーめんどい!

    ってことで、ボックス単位に指定してあげましょい!ということで
    下記の方法。
    line-height:200px;

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

    やってみましょう!

    普通に縦200pxの場合
    cssで中央表示をがんばってみるぅー!



    line-height:200px;行間指定を入れてみると・・・
    cssで中央表示をがんばってみるぅー!


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

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


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


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


    cssで中央表示をがんばってみるぅー!
    二行以上を実現したいならこれだ!ちなみに、コードは・・・
    width:550px; height:200px; vertical-align:middle;
    display: table-cell;
    でも、IEだとちょっと上よりになる!


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

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

    できたー\(-o-)/<わーい

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


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


    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
    参考になりました!ありがとうございます!
    2013.11.20 22:33 | URL | 通りすがりのチェ #- [edit]
    いろいろ試したけど、ここので中央縦にでけた~!
    ありがとうヽ(´∀`)ノ
    2012.09.26 23:40 | URL | まー #mQop/nM. [edit]
    ビルダーで悪戦苦闘の初心者ですが^^;
    BLOGの説明文にぶち込んだリンク文字が
    どうしてもセルの真ん中にこなくて
    vertical-align:middle;
    にもごっそりはまってましたがこちらを見させていただきなんとか。。。
    って感じです。感謝ですmm
    2012.07.14 22:23 | URL | M #- [edit]
    同じ悩みでした!中央にどうしてもこなくて。。解決しました!
    CSSって難しい!
    2012.01.08 10:54 | URL | えわれ #- [edit]


    • password
    • 管理者にだけ表示を許可する

    trackbackURL:http://lmaker.blog17.fc2.com/tb.php/306-7f10d95f

    スポンサードリンク

    リンク