Page Top

vertical-align: middleとIE6ブラウザ

November 22, 2010

既にIE9が出ているようですが、まだIE6を使用している方(特に企業さまなど)はいらっしゃり、そういうこともあり、私はまだブラウザチェックはIE5やIE5.5も含めIE6、IE7、IE8、そしてMacでのFirefox、Safari、Operaでのブラウザチェックをしていますが、今回、vertical-align: middle、もしくは、line-heightをボックスのheightと同じ数値に指定して、vertical-align: middleのように表示する方法、をdtに入れている画像要素に効かせたかったのですが、IEのIE6以下ではどうしてもdt内に含まれている画像に対しては(私の力量では)無理のようでした。divを使った場合は出来たのですが、dt要素の中にはインライン要素しか含めることができないので、divなどのブロック要素を入れることが出来ず、なので、今回はIE6でのdt内におけるvertical-align: middleは見送ることにしました。(しかし、dt内はインライン要素なのでできそうな気もするのですが、IE6以下でだと、どうしてもトップのポジションじゃないとダメ子さんのようで・・。)

自分用覚書として。今回参考にさせていただいたサイトさまは、以下の通りです。今回自分の力量では無力に終わったのですが、非常に参考になりました。このような情報はとてもありがたいです。

■「to-R」さまの「vertical-alignの使い方【css tips】
■「ヨモツネット」さまの「CSS で簡単に上下中央揃えを実現する
■「hasLayout」さまの「No line-height Vertical Center on Images Bug

最新記事