center divを水平に浮動小数点にする

私は、水平に中央に配置された「浮動」div、つまりユーザがスクロールしても画面の上に常に表示されるdivが必要です。？center divを水平に浮動小数点にする

#guiBar { 
margin-left: auto; 
margin-right: auto; 
position: fixed; 
}

margin: 0 auto助けないか（おそらくそれはposition: fixed

私はドンと一緒に動作しませんので、」次のCSSで

私はdivが左側に完全に中心ます私はすでに解決策を試しました。here from starxが見つかりましたが、それはまた、正しい位置では動作しないようです：固定されています。thisもありません。どちらかの仕事（つまり、それは中心に置かれている - 私は確信していない<input class="guiButton" type="image" src="/icons/some.png" />のFAの数は、彼の定義によって固定サイズを持っている）

出典

2012-01-05 Voo

あなたの要素は、（例えば幅用：400ピクセル）固定幅である場合は、余裕の属性と一緒に左と上の属性を使用することができます。

#guiBar 
{ 
    position:fixed; 
    left:50%; 
    margin-left:-200px; /*half the width*/ 
}

デモ：http://jsfiddle.net/VtqQD/1/show
出典：http://jsfiddle.net/VtqQD/1

編集：問題を指摘してくれたXanderに感謝します。

出典

2012-01-05 19:28:23

+1これはそうであってはいけません - http://jsfiddle.net/VtqQD/1/ – xandercoded

@ Xanderああ！非常に正しい！私は自分自身の前に持っているようだ...編集：固定。それを指摘していただきありがとうございます:) –

ありがとう、私は通常クライアント側から遠いので、私は本当にばかげた質問だったと確信しています。 – Voo

をあなたは単にであなたの要素をレイヤーになります。

z-index: 9999;

これは、あなたがトップ（z軸）上のボックスを保つ保証する、そしてあなただけ位置はあなたが好きな場所X/Y軸

参考：Adding z-index MDN

出典

2012-01-05 19:25:31 Jakub

をそれを試してみますこれが浮動小数点の中心にどのように役立つのか分かりませんか？ – Voo

divに幅と高さを定義すると、今は次元がありません – Jakub

下のjavascriptを使用すると、divやウィンドウのサイズは問題になりません。javascriptは、ロードされた後にwindow/divのサイズを見つけるので、固定レイアウトと流体レイアウトの両方に使用できます。 – user982853

あなたは使用scrollHieghtとscrollWidthは、親のdivの高さと幅を見つけるためにはJavaScriptの使用を使用することができます。次に、これらの値を2で割った値を使用してdivの中心の値を取得します。その後、上に横たえたいdivのディメンションでオフセットします。

スクリーン/ウィンドウ全体の中心を使用する場合は、window.innerHeightとwindow.innerWidthを使用して2で除算し、divでオフセットします。

出典

2012-01-05 19:26:07 user982853

私は小さな例を作った：

<html> 
<head> 
    <style type="text/css"> 
     body { margin: 0; } 
     #wrapper { width: 500px; margin: 0 auto; } 
     #top { margin: 0 auto; width: inherit; background: red; position: fixed; } 
    </style> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="top"> 
     foo 
    </div> 
</div> 
</body> 
</html>

私はそれはあなたを助けることを願っています！

出典

2012-01-05 19:34:53

HTML

<div id="subject"> 
    <div id="predicate"> 
    Read Me! 
    </div> 
</div>

CSS

#subject { 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
} 

#predicate { 
    position:relative; 
    top:50%; 
    margin:-20px auto auto auto; /*half of height*/ 
    width:140px; 
    height:40px; 
    background:#b4da55; 
}

は、私はすでに確認クリック/タッチイベントが右側の要素になりますが、私ドン作るためのz-indizesを使用http://jsfiddle.net/RfRAb/

出典

2012-01-05 19:37:03 Tank

center divを水平に浮動小数点にする

答えて

関連する問題