ボックス（div）の縦方向中央をそろえる

質問

<div id="wrap">
<div id="a">～</div>
<div id="b">～</div>
</div>

#a { float: left; }
#b { float: right; }

a, b を wrap で包み、a, b を float で左右に並べています。
この a と b のボックスの高さが違うとき、これらを縦方向センターでそろえるにはどうしたらよいでしょう？

回答No.4

goldfox · ベストアンサー

IEで、「どうしても」縦方向センタリングしたいなら、
table使いましょう。
（tableレイアウトは非推奨ではありますが、絶対やってはいけないというものではないです。）

お礼

いちばん崩れにくくて良いのかもしれませんね。
　＜ table レイアウト

ヘッダとフッタが混みいっているので、この手で行くかもしれません。

回答No.5

leap_day

こんにちは

<script type="text/javascript"><!--
window.onload=function() {
obja = document.getElementById("a");
objb = document.getElementById("b");

ha = obja.clientHeight;
hb = objb.clientHeight;

if(ha > hb) { ma = 0; mb = (ha - hb) /2;}
else { ma = (hb - ha) / 2; mb =0; }

obja.style.marginTop = ma + "px";
objb.style.marginTop = mb + "px";
}
//--></script>

<style type="text/css"><!--
#a {
float:left;
width:300px;
height:500px;
background-color:aqua;
}
#b {
float:right;
width:300px;
height:300px;
background-color:lavender;
}
--></style>

<div id="wrap">
<div id="a"></div>
<div id="b"></div>
<div style="clear:both;"></div>
</div>

ってことでしょうか？
※width,height,background-colorは擬似的につけてます

※heightが固定されているならCSSのみでもできますが・・・
<style type="text/css"><!--
#wrap {
position:relative;
height:500px;
}
#a {
position:absolute;
width:300px;
height:500px;
background-color:aqua;
top:0px;
left:0px;
}
#b {
position:absolute;
width:300px;
height:300px;
background-color:lavender;
top:50%;
right:0px;
margin-top:-150px;
}

--></style>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
</div>

お礼

JavaScript で Box の高さを計算してやるのですね。
試してみます。

回答No.3

abril

> a と b のボックスの高さが違うとき、これらを縦方向センターでそろえるには

「縦方向センター」とおっしゃっているので、仮に、#aの高さが3行分・#bの高さが5行分、と仮定した場合、下記の様な配置をイメージされておりますでしょうか？（テキストですので多少のグリッドのズレは無視して下さい）
・#wrapの領域：■
・#aの領域：□
・#bの領域：○
■■■■■■■■■■■■■■■■■■■■■■■■■
■　　　　　　　　　　　○○○○○○○○○○○○○○○■
■□□□□□□□　○○○○○○○○○○○○○○○■
■□□□□□□□　○○○○○○○○○○○○○○○■
■□□□□□□□　○○○○○○○○○○○○○○○■
■　　　　　　　　　　　○○○○○○○○○○○○○○○■
■■■■■■■■■■■■■■■■■■■■■■■■■
IE以外の主なモダン・ブラウザであれば、"display: table-cell;"を利用することで簡単に実現できるのですが、残念ながらIEは7.0になってもこのプロパティに対応していない様です。IE用のhackでposition等を駆使したサンプルもあるにはあるのですが、ボックスの高さが固定されていることを前提としていたり、2コラムという事は考慮していなかったり、でした。流動的である場合は、やはりANo.2の回答者様のご回答の用に、JavaScriptで高さを取得して常にその半分の位置に配置する、という様な仕掛けに頼らないとIEを含めた環境で満足の行く結果を得ることは難しいのではないかと思います。

一応、サンプルを提供しているサイトをいくつか参考までに挙げておきます。
http://blog.livedoor.jp/dankogai/archives/51011227.html
http://phpspot.org/blog/archives/2006/12/divcss.html
（DTD宣言の種類に依っては意図通りにならない場合がありますので、ご注意下さい）

お礼

サンプルサイト、見てみました。
ブラウザによってとか、面倒なもんですね。　＜CSS
IE でレイアウトが崩れたりとか、けっこう苦労しています。

回答No.2

noname#84373

<script>
window.onload=function(){
$('wrap').style.position='absolute';
if(h('a')>h('b'))sh('b',(h('a')-h('b'))/2);else sh('a',(h('b')-h('a'))/2);
alert((h('a')-h('b'))/2);
}
function h(n){return $(n).offsetHeight}
function sh(n,v){$(n).style.top=v}
function $(n){return document.getElementById(n)}
</script>

お礼

JavaScript はよく知らないのですが、

h(n)
オブジェクト（というのでしょうか？）n の高さを得る

sh(n, v)
n の上部ポジションを v にする

$(n)
n の ID を返す。

で、低い方の Y 座標を高さの差の 1/2 ずらして中央揃えですね。

JavaScript もちゃんと勉強したら面白そうですね。
ありがとうございました。

回答No.1

CyberDenx2

もう少し詳しく聞きたいのですが・・・。

【縦方向センター】
ページセンターにコンテンツを表示し2カラムのページを作成したい。

という解釈で問題ないでしょうか？
という解釈の上で回答します。違っていた場合申し訳ありません。

#wrap {
width:300px;
padding;0:
margin:0 auto;
text-align:center;
}
#a {
float: left;
width:40%;
padding;0:
margin:0;
text-align:left;
}
#b {
float: right;
width:60%;
padding;0:
margin:0;
text-align:left;
}

こんな感じで大丈夫かと・・・
もしボックスの下辺を揃えるのであれば背景画像を指定します。
参考サイト
http://web-100.jp/sample/056.shtml

お礼

具体的には、

- 上記 a の中にロゴ画像があり、左側に寄せる
- 上記 b の中にサブメニュー（ul li で横並びにして作りました）があり、右側に寄せる
- 上記 a と b が高さ中央でそろってる

という感じです。

　　wrap 左端　　　　　　　　　　　　　　　　　　　　　　 wrap 右端
　　↓　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
　　｜　　　　　　　　　　　　　　　　　　　　　　　　　　｜
　　｜□□□　　　　　　　　　　　　　　　　　　　　　　　｜
　　｜□□□　　　　　　　　　　　　item1 | item2 | item3 ｜
　　｜□□□　　　　　　　　　　　　　　　　　　　　　　　｜
　　｜　　　　　　　　　　　　　　　　　　　　　　　　　　｜

□□□
□□□
□□□　がロゴ画像

みたいな感じにロゴ画像高さ中央と、メニューの高さ中央を
そろえたいのです。