1ページが1テキストで、
それを垂直配置させて見せていた。デザイン的に。
それが結構気に入ってたので、
MovableTypeに移行してからもそうしようと思っていたのだけど、
同時に、アクセシビリティ的な観点から、
整形を目的としたTableの使用を止めようと考えていたので、
実現はなかなか困難だった。
NOBODY:PLACE – MUTTER: ブラウザ対応問題：垂直配置に悩む。
んで、捻り出したのが、
テキストの行数を計算し、テキスト全体の高さを概算して、
その半分量だけ、上方向にマージンを取るという、
なんつう力ワザ…（苦笑）
（しかも結果的に、Table使ってしまっているし）
結局、垂直配置は諦めて、今みたいな、上揃えのデザインになりました、と。
で、もう垂直配置のことなんか、
殆ど忘れてしまっていたのだけど、
PHPSPOTにこんな記事が載っていた。
DIVを垂直方向に中央寄せするCSSサンプル。
次のように、DIV要素をブラウザの縦方向に配置できます。
（引用元：ex animo）
DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌要点だけ書くと、
- ページ全体に高さを設定
- 上要素（スペーサー）はページ全体の半分に配置（下辺が半分の位置）
- 下要素の高さを指定
- 下要素は高さの半分だけ、上方に移動
確かに、そのようになる…のだけど、
ソースを眺めててちょっと疑問。
僕にとっての垂直中央配置、ってのは、
画面の中央線と、要素の中央線が一致すること、なのだけど、
実はこのソースではそうはならない。
■ 僕の考える垂直中央配置
■ このソースでの垂直中央配置
要は、このソースの通りに書くと、
スペーサーが、要素の高さの半分だけ上方に移動しているために、
ページの中央線が、要素の下辺に接していることになる。
ソースで言うと、この部分。
div#shiv {
background: transparent;
width: 100%;
height: 50%;
margin-top: -50px;
float: left;
} まぁ、CSSで垂直を設定できるよ、というのが、該当エントリの趣旨なので、
ソースの結果が中央かどうかなんてことは些末なことでしかないのだけれども、
これって、なんか意味あるのかなぁ…と思って。
今はもう、このCSSをサイト全体に適用することはないけど、
（もうこの体裁になれてしまったし）
もし、何らかのデザインを要求される作業があったときには、
垂直線を一致させる方向で、コードを書くことになるかなぁ、と思う。
■ 追記
あ、あと、もう1点。表示要素の高さを、あらかじめ指定しておく必要があると言うこと。
画像なんかだったら、容易ではある。
でも、テキストだったら…ねぇ？
高さが不確定な要素に対しては、あんまり現実的ではない。
スクロールバーを機能させれば別だけど、
IEであれ、Geckoであれ、
テキストの量が増えれば、高さは溢れてしまうわけで。
（幅は、普通は溢れないことになってるはずだけど）
かといって、高さに対するマージンを多く見積もったら、
今度は垂直中央配置のズレが大きくなってしまう。
枠としては中央配置だけど、見た感じそうは見えないという。
前述の力ワザみたいに、
要素の高さを測るという手もあるけれども、
CSSを動的に作成する必要があるよな。
JavaScriptでごにょごにょとか。
そうなると、本末転倒…
やっぱり、垂直中央配置ってのは、
HTMLにおいては、ある程度諦めることなのかなぁ、と思う。。
もちろん、方法の模索は常に面白いのだけどね。
