在變量窗口大小的屏幕上居中固定的高度/寬度對話框

我試圖在屏幕上使用jquery mobile和CSS3（沒有javascript計算）固定高度和寬度（750x360）的對話框居中。這將在iPad移動Safari上運行，到目前爲止我還沒有找到適用於該瀏覽器的calc（）版本。在變量窗口大小的屏幕上居中固定的高度/寬度對話框

我目前正在使用javascript計算margin-top。參數是窗口的可變高度和對話框的固定高度。不過，我需要從我的實現中移除這個以符合標準，並且如果可能的話，只使用CSS/jquery方法。

有沒有辦法做到這一點？

我導入jquery UI和jquery移動庫，所以我可以訪問他們所有的方法。

來源

2012-06-27 Daniel Gradinjan

下面是關於如何垂直和水平居中div一個例子：

#center { 
    background-color: red; 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; /* half the height */ 
    margin-left: -50px; /* half the width */   
}

實施例上jsfiddle

爲了定位你使用position:absolute這種方式，可以指定其中元素應該是不具有元件擔心其他因素。要將元素居中放置，我們要將它放在容器大小的50%上。但是如果我們停在那裏，左上角的元素將居中。因此我們必須添加margin's。

希望這可以幫助你在正確的方向。

來源

2012-06-27 16:25:01 albin

這個問題是，我試圖中心固定維度的jquery移動對話框。該對話框上有菜單和文本框。前段時間，我的隊友嘗試了這種解決方案，但它導致在對話框中打開的任何菜單/下拉菜單都會左右移動，與對話框移動的距離相同。如果jquery使用瀏覽器原點進行像素距離計算，這樣可以，但是它並沒有，它使用了對話框的原點，它現在是jquery認爲它的位置的正負200 +像素。 –

它是一個標準的jQuery UI對話框？然後，如果你還沒有傳遞其他東西（[documentation]（http://jqueryui.com/demos/dialog/#option-position）），它應該被默認居中。如果你可以的話，如果你添加一些示例代碼（在[jsfiddle]（http://jsfiddle.net/））來玩就更好了。 – albin

在變量窗口大小的屏幕上居中固定的高度/寬度對話框

回答

相關問題