如何使用jQuery將視圖中的對象水平居中？

我知道這是之前問過的，但是我的情況有點奇怪。我正在構建一個iframe，以便稍後在網站上的幻燈片元素中使用。如何使用jQuery將視圖中的對象水平居中？

我還有很長的內容適應Flexbox的這遠遠超出了屏幕，我想使用的

left:50%; 
transform:translateX(-50%);

要水平的CSS技巧居中當前查看區域的頁面，所以當你調整窗口大小，中間的當前查看的元素，仍然會保持水平在屏幕中間。

由於我的flexbox具有內容自適應性，所以它就像5K像素長，所以我顯然不能使用css％。所以我去了jQuery，並使用$(window).width()來確定當前的視口大小，並用.css({})方法調整元素。這裏是jQuery代碼：

$(document).ready(function(){ 
$(window).resize(function(){ 
var winWidthHalf = ($(window).width())/2; 
$("#ss_home").css({ 
"left":"-"+winWidthHalf+"px", 
"-webkit-transform":"translateX("+winWidthHalf+"px)" 
}); 
}); 
});

而這裏的難題：它的工作。然後，我重新啓動了個人計算機，但此後不工作。無論我做什麼似乎都沒有幫助。你能幫我嗎？我不知道會發生什麼...... 這裏是頁面預覽，請不要介意代碼中的其他註釋，它們現在是不相關的：http://users.metropolia.fi/~staniss/test/slideshow/

所有內容都只是樣本。

我也很想知道如何組$(document).ready和$(window).resize正確的，因爲我執行相同的代碼，但不想複製粘貼兩次只是改變的事件，因爲這是一個不好的做法。我一直無法找到正確的語法。

另外對不起，該示例僅適用於Chrome，它在開發中很早，所以我沒有打擾兼容性。

來源

2014-01-20 Megakoresh

我不能告訴你的樣品有什麼問題 –

沒有人可以嗎？真？該死的...... – Megakoresh

你爲什麼不解釋問題是什麼？圖形示例或視頻可能會有所幫助。 –

這是一個瀏覽器供應商擴展問題（必須添加-webkit-前綴來轉換）：P。

來源

2014-04-15 17:13:21 Megakoresh

如何使用jQuery將視圖中的對象水平居中？

回答

相關問題