【CSS】divの中で縦方向の中央揃えは、どうやってかくのでしょうか？

質問

すいません、divの中で縦方向の中央揃え、つまり、

divの代わりにtableタグの中のtdで書いた場合の、
<td valign="middle">ほげほげ</td>

と同じことをdivで実現するにはどうすればいいのでしょうか？

ご存じの方いらっしゃったら、よろしくお願いいたします。

回答No.2

noname#66720

display:table-cell;はモダンブラウザ用にメインのCSSで書けば、上書きする必要はないのではないでしょうか。
display:inline;とzoom:1;のみie8未満に適用してやれば。

あと、条件付コメントを使う時には
<!--[if IE]><style type="text/css"></style><![endif]-->
という感じに、styleの外に書いてやらないとページの上部に空白ができることがあります。

それで<!--[if gt IE 7]>と記述した場合、実際に適用されるのはIE8.xからになります。
もし7.xが出る可能性を考慮に入れるのであれば<!--[if gt IE 7.0]>と記述すれば対応できます。

回答No.1

noname#66720

http://www.yomotsu.net/lab/css/alignmiddle
ここのリンク先にくわしく書かれていますが、モダンブラウザにはdisplay:table-cell;、IEはバグ解釈を利用してdisplay:inline;とzoom:1;を適用します。

実際に使うときにはCSSハックよりは条件付コメントを利用されるほうがよいと思います。
http://www.respect-pal.jp/coding-text/tips/07.php
おそらくIE8はdisplay:table-cell;に対応してくるので、IE8未満でスタイルを適用してください。

お礼

ご回答ありがとうございます。

で、以下のようにcssを記述してみたのですが疑問点が…

//---

<div class="miya-vertical_align-wrapper">
　<!--inside this div, vertical-align is avalable.-->
　<div class="miya-vertical_align-middle">
　　中身中身中身・・・・・
　</div>
　<!--/inside this div, vertical-align is avalable.-->
</div>
//---

//---
div.miya-vertical_align-wrapper{

/*以下

（１）IEで、バージョンが７以下（７を含む）のものに対して適用
（２）IEで、バージョンが７より上（７は含まない）のものに対して適用
（３）IE以外に対して適用
の順。
*/

　<!--[if lte IE 7]>
　　display:inline;
　　zoom:1;
　<![endif]-->

　<!--[if gt IE 7]>
　　display:table-cell;
　<![endif]-->
　<!--[if !IE]>-->
　　display:table-cell;
　<!--<![endif]-->
}

div.miya-vertical_align-wrapper div.miya-vertical_align-middle{
　vertical-align:middle;
}

//---

疑問点が２つあります

（１）
　将来もしIE バージョン 7.5 のようなものが現れたとして

　その場合「IE バージョン 7.5 」は、
　[if gt IE 7]（バージョンが７より上（７は含まない）のものに対して適用）
　の条件にあてはまってしまうのでしょうか？

　もしあてはまってしまうとしたら、どう書きなおせば、対応できるでしょうか？

　　（※）
　　<!--[if lt IE 8]>
　　　display:inline;
　　　zoom:1;
　　<![endif]-->
　　「のように、IEのバージョンが８より小さい（８は含まない）」、という書き方ができれば、対応できるのですが、
　　http://journal.mycom.co.jp/special/2007/ie7/017.html
　　によると、「8」を書くことはできないようでして・・・。

（２）
　<!--[if gt IE 7]>
　　display:table-cell;
　<![endif]-->
　<!--[if !IE]>-->
　　display:table-cell;
　<!--<![endif]-->

　の部分、冗長なのですがこうしかかきようがないでしょうか？

　　（※）
　　「else」が使えれば、解決できそうなのですが、検索しても、elseを使った例や解説が見つからず。
//---

以上、よろしければお答えいただけると助かります。
よろしくお願いいたします。