上下中央揃えでの落とし穴

| コメント(0)
CSS で簡単に上下中央揃えを実現する

こちらの記事で紹介されている方法で、
よく中央揃えを実装します。

非常に便利なのですが、先日どうしても上手くいかず
かなりの時間悩んでしまったことがあったので、
忘れないようにメモを残しておきます。


● テキストテキスト
text-indentでテキストを飛ばした背景画像

このような左右の2ブロックを中央揃えにしたのですが、
IE6でのみ中央揃えになりませんでした。

どうやらtext-indentが原因だったようで、
単純にimgタグで画像を設置したら問題なく中央揃えになりました。


他にも、並べる要素はブロック要素でなければ
ならなかったりするようです。
spanなどにdisplay:blockを指定しても上手くいかなかったので、
上記もimgタグをpタグで囲ったりしています。


コメントする

このブログ記事について

このページは、gravity-worksが2012年4月25日 10:45に書いたブログ記事です。

ひとつ前のブログ記事は「ページを右クリック禁止にする」です。

次のブログ記事は「CSSで印刷する要素を設定する」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。