ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：gaziroh ボックス（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 のボックスの高さが違うとき、これらを縦方向センターでそろえるにはどうしたらよいでしょう？
質問投稿日時：08/04/18 13:09
質問番号：3956915
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

 
回答者：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>
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/04/18 19:43
回答番号：No.5
この回答へのお礼JavaScript で Box の高さを計算してやるのですね。
試してみます。

回答

良回答20pt
回答者：goldfox IEで、「どうしても」縦方向センタリングしたいなら、
table使いましょう。
（tableレイアウトは非推奨ではありますが、絶対やってはいけないというものではないです。）
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/04/18 19:22
回答番号：No.4
この回答へのお礼いちばん崩れにくくて良いのかもしれませんね。
　＜ table レイアウト

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

回答

 
回答者：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宣言の種類に依っては意図通りにならない場合がありますので、ご注意下さい）
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/04/18 19:08
回答番号：No.3
この回答へのお礼サンプルサイト、見てみました。
ブラウザによってとか、面倒なもんですね。　＜CSS
IE でレイアウトが崩れたりとか、けっこう苦労しています。

回答

 
回答者：_pipi_ <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>
種類：補足要求
どんな人：一般人
自信：参考意見
回答日時：08/04/18 17:37
回答番号：No.2
この回答へのお礼JavaScript はよく知らないのですが、

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

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

$(n)
n の ID を返す。

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

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

回答

 
回答者：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​
種類：回答
どんな人：経験者
自信：自信あり
回答日時：08/04/18 17:09
回答番号：No.1
この回答へのお礼具体的には、

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

という感じです。

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

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

みたいな感じにロゴ画像高さ中央と、メニューの高さ中央を
そろえたいのです。
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ