-5
A
回答
1
要居中的藍色方塊,它的位置必須設置爲position:absolute;
如果你的藍盒子是動態變化的大小,你必須使用JavaScript來居中。
下面是一個簡單的例子:
$('#color')
.css('top','50%')
.css('left','50%')
.css('margin-left','-'+($('#color').outerWidth()/2)+'px')
.css('margin-top','-'+($('#color').outerHeight()/2)+'px');
確保它停留在瀏覽器中調整大小中心:
$(document).bind('resize', function(){
$('#color')
.css('top','50%')
.css('left','50%')
.css('margin-left','-'+($('#color').outerWidth()/2)+'px')
.css('margin-top','-'+($('#color').outerHeight()/2)+'px');
});
它可能會來包裝中心的代碼放到一個函數調用一個好主意它只要藍色框的大小發生變化。
下面是編輯的jsfiddle:
0
基礎在CSS中元件:
- 做一個容器的元素,並把它放在
body
水平(以中心在屏幕的中間) - 在容器上設置
position: relative
- 集
position: absolute
的元件 - 添加固定
width
和height
到元件 - 元件
- 設置
margin-left
和margin-top
至負半上設置top: 50%
和left: 50%
上width
和height
分別
同樣的邏輯適用於jQuery,只有你可以動態計算維度和邊距。
+0
我知道css。我相信這個問題指定使用jQuery。 – 2013-03-01 00:37:06
+3
同樣的邏輯適用於jQuery。 – elclanrs 2013-03-01 00:37:43
相關問題
- 1. 垂直於元素的中心屏幕
- 2. 如何將父遊戲對象置於屏幕中央?
- 3. 如何將模態置於屏幕中央?
- 4. 屏幕中央的中心位置
- 5. CSS:位於屏幕中央的位置加載指示器
- 6. 如何將div放置在屏幕中央的iFrame中
- 7. 如何將div放置在屏幕中央?
- 8. 我如何將控制位置更改爲屏幕中央?
- 9. jQuery和CSS位置元素在屏幕中心
- 10. 在屏幕上放置一個元素
- 11. 將元素延伸到垂直偏移屏幕底部
- 12. 相對鼠標位置,如果元素大於屏幕
- 13. jQuery垂直泡泡字幕HTML元素
- 14. 屏幕上的Android位置元素
- 15. 將文字置於屏幕中間
- 16. 將VB內容放在屏幕尺寸不同的全屏幕中央
- 17. jquery/Javascript - 捕獲頁面屏幕或元素的位置
- 18. 彈出式窗口,中央屏幕
- 19. 在屏幕中央顯示HTML表格
- 20. jQuery獲得邊緣需要將元素放在屏幕上方
- 21. 停止單個UICollectionView單元流到屏幕中央
- 22. 隱藏屏幕SVG元素
- 23. 將屏幕上的彈性元素啓動到位置
- 24. CSS將元素保持在屏幕上的「固定」位置
- 25. 將元素的高度設置爲屏幕高度 - Angular2
- 26. Silverlight:將一個元素放置在屏幕的頂部?
- 27. 如何將畫布居中在屏幕中央
- 28. 如何在中央屏幕上放置表格?
- 29. 如何使用畫布在屏幕中央放置圖像
- 30. 如何設置gtkmm窗口在屏幕中央打開?
你嘗試過什麼?這個JSFiddle與你之前的問題有關......看起來你讓我們一點一點地構建你的項目。 – ahren 2013-03-01 00:34:51
似乎你得到了「在問題中發佈一些代碼而不是鏈接到JSFiddle」的消息,在這種情況下,你應該發佈與問題相關的代碼而不是隨機標籤。 – 2013-03-01 00:35:54
請在查詢之前查詢!!! http://bit.ly/XdUUjs – 2013-03-01 00:41:21