2012-02-22 1 views
1

私はこの問題を改訂して説明しました。100%Heightディビジョンが正確な中間のイメージを持っています - CSS

私の質問です...クラス「ウィンドウ」の中にロードされている内容に基づいて高さに成長することができますdivのであれば、どのように私は真ん中(中心高さに正確にfloatへの「ローダー」IDを取得します/ width)divクラス "Window"? 「loader」は、クラスWindowのコンテンツの上に浮動する必要があります。今回は十分に説明したいと思っています。再度、感謝します。ここで

.Window { 
    margin:15px; 
    width:100%; 
    text-align:center; 
} 

#loader { 
    display:none; 
    width:32px; 
    position: relative; 
    top: 50%; 
    margin: 0 auto; 
} 

<div id="someid" class="Window"> 
    <div id="loader">yo</div> 
</div> 

答えて

0

まずあなたが#loader上の高さを設定する必要があります...以下のコードです。そして

、{H}は#loaderの半分の高さである margin: -{H}px auto auto autoにそのmarginスタイルを調整します。

+0

。これはあなたが望むものであると思います。私はマージンを追加しました: - {H} px auto auto autoも#loaderに加えます。それが中心ではありませんでした – Joe

+0

http://jsfiddle.net/BcSaq/ – Joe

+0

いいえ、{H}を#loader divの半分の高さに置き換える必要があります。 #loaderの高さが40ピクセルの場合、{H}を20ピクセルに置き換えます。 http://jsfiddle.net/BcSaq/2/ – SenorAmor

0
<html> 
<style type="text/css"> 
.Window { 
background-color:green; 
height:auto; 
width:100%; 
overflow:hidden; 
position:relative; 
} 
#loader{ 
width:32px; 
height:32px; 
background-color:red; 
position: relative; 
margin: 0 auto; 
} 
.new{ 
height:30px; 
width:30px; 
} 
</style> 
<script type="text/javascript"> 
function addContent(){ 
var add = document.getElementById("someid"); 
var div = document.createElement("div") 
div.setAttribute("class","new"); 
add.appendChild(div); 
} 
</script> 
<body > 
<div id="someid" class="Window"> 
<div id="loader" onclick="addContent()">yo</div> 
</div> 
</body> 

更新:更新されたコードを確認するには、私が#loaderに32PX幅を追加

+0

ディスプレイ:なし; jQueryが表示するために必要です。もともと私は#ローダーの高さを設定すると消えてしまうでしょう – Joe

+0

あなたは何を探していますか?..あなたの説明を完全に得られますか?あなたの模倣しようとしているサイト/ modluleの例がありますか?www.jsfiddle.netを使って、あなたが何を望んでいるのかを説明してください。 –

+0

http://jsfiddle.net/BcSaq/緑色のボックスの中央に赤色のボックスを配置しようとしています – Joe

関連する問題