上下の真ん中、左右の真ん中。
そこを基準に、2つの要素を整列させる。
簡単に言うと、大きいブロックの中に、画像を表示します。
画像の表示位置は、額縁のように大きいブロックの真ん中に表示したい。
という状況。
コレを、HTMLとCSSで表現したい。
何も気にせずに組むとすれば、HTMLのtableタグで表を作り、その属性でやれば一番簡単なのです。
でも、「tebleタグによるレイアウト」や、HTMLに構造以外のものを記載するのは余り好ましくないといわれています。
tableタグを使わず、divタグとCSSでコレを表現するってなると、結構面倒みたい。
同じようなコトをしたい人は少ないわけではなく、実際に使われている例文を見かけ、それを使ってみたものの、IE6では上手く行かず。
どうして上手くいかないかを調べたいところですが、日記のために一時中断。
「IE6の切捨てはまだ早い」が原状の持論なので、流石に対応しないわけにはいかないのですよ。
昔は、ブラウザ個体差とかでこんなに悩むことが無かったような気がするんだけどなぁ。
以前よりも、微細なところの設定を気にするから、微細な差が出るブラウザでの差異に巻き込まれる...ってのが事実なんだろうけど。
にしても、「上下左右の中央寄せ」って、そこそこ需要があるんじゃないかなぁ・・・と思うんですよね。
まぁ、そこに関係する要素がすべて高さ・幅が固定なら、marginとかで調整することは可能だけど、縦方向に不定要素が入ると、その方法が出来なくなるんだよね。
その辺を全部「自動」でやってくれれば、どれだけ簡単か・・・。
tableでレイアウトするなって言うなら、tableでレイアウトをしなくてもいいようにしてくれればいいのに・・・と。
CSSを使い始めた頃から、ずーっと思っていることだったり。
「center」タグの代用品が一癖あったり(左右のmarginに「auto」を指定することで設定できるけど、IE6のモードによっては動かない)、今回書いたような、「上下左右の中央揃え」が出来ないとか。
完全に移行してほしいなら、古い方に利点を持たせないこと。
コレ、結構重要だと思うんだけどなぁ。
IE7とIE8が重たくて、フリーズ連発ってのが無くなれば、「みんなとっとと移行するんだ!」っていえるけど、フリーズ連発するものをオススメはは出来ないからね。
その点で、IE6に「利点」が残ってるからねぇ。
ホント、なんか、いい方法無いかなぁ・・・。
ブラウザ内でFlashやJavaを使って描画まですれば、「どのブラウザでも同じ表示」になるのかなぁ・・・と思いますけど、それって、Flashプレイヤーが1種類しか無いからって話になるんだろうしなぁ。
万が一、Flashプレイヤーの互換版が別のところから出たら、それも崩れる可能性もあるし、そのFlashプレイヤーが、すべてのブラウザで同じ表示をしているのかというのも分からないところ。
なんか、いい方法あればいいんだろうけどなぁ・・・と。
そんなことを考えながら、本日の日記でした。