No.5
- 回答日時:
こんにちは
<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>
No.3
- 回答日時:
> 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/510112 …
http://phpspot.org/blog/archives/2006/12/divcss. …
(DTD宣言の種類に依っては意図通りにならない場合がありますので、ご注意下さい)
サンプルサイト、見てみました。
ブラウザによってとか、面倒なもんですね。 <CSS
IE でレイアウトが崩れたりとか、けっこう苦労しています。
No.2
- 回答日時:
<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
- 回答日時:
もう少し詳しく聞きたいのですが・・・。
【縦方向センター】
ページセンターにコンテンツを表示し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 |
|□□□ |
| |
□□□
□□□
□□□ がロゴ画像
みたいな感じにロゴ画像高さ中央と、メニューの高さ中央を
そろえたいのです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
CSS のみのタブ切り替えについて
-
ウィンドウサイズを無視して、D...
-
YES or NO形式で進んで行く、タ...
-
CSS 2カラムの可変
-
divのheight指定で画面一杯に表...
-
スマートフォンで適切に見られ...
-
MAX関数を使ってからLEFT JOIN...
-
チェックボックスに入っている...
-
jquery ドロップダウンメニュー...
-
読み込んだQRコードをフォーム...
-
C言語のポインタ表現
-
javascript ループがうごかない
-
Colorboxがうまく設置できません
-
JQueryタブのアクティブ アン...
-
透過pngの透明部分以外をクリッ...
-
背景色を透明化
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
クリックするたびに画像を変える
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
サイトにコンテンツを並べる際...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
textareaで入力した文字を改行...
-
文字をクリックしたら別の文字...
-
css固定したフッターが本文と重...
-
文字を固定したいのですが…
-
Flickity で画像にリンクを貼る...
-
Ctrl+F(検索)の窓を出したいの...
-
オンマウス時に別画像を上に重...
-
背景の過
-
離れた場所にマウスオーバーで...
-
チェックボックスの背景色って...
-
フッターの下に隙間ができてしまう
-
ポップアップのソースの書き方...
-
スタイルシートで画面を上下に...
-
floatさせたdivタグを折り返さ...
-
TABLEの高さを固定したいのですが…
おすすめ情報