ディビジョンをページではなく画面に対して水平方向と垂直方向にどのようにセンタリングすることが可能ですか?ユーザーが長いページをスクロールすると、divは水平方向と垂直方向の中央に維持されます。 <div>
ためデッド・センタリング・ディビジョン
答えて
ここでは、純粋なCSSソリューションですが、パーセンテージとマイナスマージンに注意してください。ここで
div {
position: fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
これは素晴らしいクリーンな解決策です。これは、centeringしているdivがbody要素の直接の子である場合、またはdivとbody要素の間に '位置付け'の祖先がない場合に機能することを追加したいだけです。 – Beejamin
これはどのブラウザでテストされているのですか? jsfiddleのリンクは私のために働いていません... –
CSS:<div>
上のjQueryを使用して、上記設定し
position: absolute
left : (centerofpagepixel.x - (width of div /2));
top : (centerofpagepixel.y - (height of div/2));
。
もう一度jQueryを使用してcenterofpagepixel.x
とy
を計算することができます。おそらく、画面の幅/高さを取得し、2
ちょうど追加、ここのキーは位置:絶対CSSスタイルです。 – Neeraj
によってそれらを分けるまた、次を試してください:
HTMLマークアップ:
<div class="classname">text here</div>
CSS:
.classname {
position:absolute;
left:50%;
top:50%;
padding:10px;
border:1px solid #ccc;
}
ボーダーおよびパディングは、要件に基づいて変更または削除することができます。また、親コンテナを相対的に配置する必要があります。つまり、position:relative
である必要があります。
あなたのコードは、ちょうどwindow.onscrollこのイベントを添付し
http://www.geekdaily.net/2007/07/04/javascript-cross-browser-window-size-and-centering/
です。あなたはスクロールしながら垂直方向の中央に何をjQueryのを使用する必要、この
function addEvent(obj,ev,fn) {
if(obj.addEventListener) obj.addEventListener(ev,fn,false);
else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}
addEvent(window,"scroll",yourfunction);
幸運
- 1. ディビジョンが正しくセンタリングされない
- 2. Pythonディビジョン丸め
- 3. ECMAScriptの2015時間的なデッド・ゾーン
- 4. シグナルを受信するデッドQML要素?
- 5. ActiveMQのデッド接続の問題
- 6. ニュートン・ラフソン・ディビジョン(Big Integers)
- 7. ディビジョン間の空白
- 8. ストライプバックグラウンドオーバーラップを持つディビジョン
- 9. ディビジョンのコンテンツのオーバーフロー
- 10. HTML |センタリング
- 11. センタリングGUI
- 12. センタリングNavigationBar
- 13. HTMLでのディビジョンの拡大
- 14. Sqlディビジョン2集計関数
- 15. ディビジョン・スパン内のディバ・スパン.... DivSpanception
- 16. フレーム内のAjaxロード・ディビジョン
- 17. ドラッグアンドドロップで消えるディビジョン
- 18. HTMLディビジョン、列、水平スクロールバー
- 19. ディビジョンの高さの問題
- 20. ディビジョン1、他のバグ内部
- 21. センタリングの問題
- 22. パンダテーブルのセンタリング
- 23. センタリング入力
- 24. qlabelのセンタリング
- 25. センタリングサブメニュー - センタリングなし
- 26. CSSフローティングのセンタリング
- 27. センタリングNavbar - 垂直
- 28. WRAP_CONTENTのセンタリング
- 29. インラインブロックイメージのセンタリング
- 30. ブートストラップカルーセルのセンタリング
を試みることを意味しないのですか?水平センタリングを行うには、ユーザが5000pxの長いページをスクロールしていても、画面の中央にちょうど正確に「margin:0px auto;」、つまり – jchavannes
を使用します。 – Mike