將比屏幕寬的div對齊中心到屏幕中心

我有一個嵌套在幾個div中的圖像。圖像的寬度是2000px，當瀏覽器的寬度設置得小於頁面加載時的寬度時，我希望圖像的中心與屏幕中心對齊，並且能夠滾動到左/右查看圖像的其餘部分。我還需要粉紅色邊框的div來跟隨圖像，保持與現在相同的位置（Square需要留在英國和波蘭的圈子上方）。將比屏幕寬的div對齊中心到屏幕中心

我有一個JS小提琴在我到目前爲止，所以當頁面加載時，我希望我放置在地圖上的X出現在屏幕中間，然後能夠仍然左右滾動查看地圖的其餘部分。 我還需要圖像保留作爲圖像元素，而不是背景圖像，因爲我具有允許縮放的頁面功能，但在使用背景圖像時會得到不期望的結果，但是我已經剝去了所有代碼這個問題的目的。

//html 
    <div id="map-container"> 
     <div id="map-inner-container"> 
     <img src="http://img253.imagevenue.com/aAfkjfp01fo1i-27999/loc573/72685_vector_world_map_v2.2copy_122_573lo.jpg" style="z-index:-9999;"> 
     <div id="map-1" onclick="showPopup(1)"><!-- UK --></div> 
     <div id="map-2" onclick="showPopup(2)"><!-- Poland --></div> 
     </div> 
    </div> 

//css 
    #map-container{ 
     z-index:-9000; 
     width:2000px; 
     height:1414px; 
    } 
    #map-inner-container { 
     position:relative; 
     top:0; 
    }

的jsfiddle： http://jsfiddle.net/Lt4PW/7/

我在這裏看了一下其他很多類似的問題上，並嘗試了所有的解決方案，但他們都不工作。我確實通過讓圖像的中心對齊屏幕的中心來關閉一次，但無法滾動，添加overflow:auto時發生事件。

所有我發現用剛剛CSS其他的解決方案，事情喜歡上了IMG的外層div left:50%和margin-left:-1000px /*half of width*/的，但這樣的事情並沒有爲我工作，我打開一個JavaScript/jQuery的解決方案，或純粹的CSS，如果它的工作。

幫助非常感謝，因爲我很茫然！ :(

來源

2014-06-20 Nathan

像這樣的事情？ http://jsfiddle.net/Lt4PW/4/ – Jop

您可以將圖像設置爲'＃map-container'上的背景圖像嗎？然後，只給''地圖容器{寬度：100％;}' –

'我還需要粉紅色邊框的div來跟隨圖像，保持現在的位置（Square需要留在英國和圓圈在波蘭）''''''''''''''''''''在代碼中看不到任何關於粉紅色邊框div的內容。 – Trevor

使用jQuery，你可以做到以下幾點：

var windowHeight = $(window).height(); 
    var windowWidth = $(window).width(); 
    $('body').scrollTop(($('#map-container').height()/2)-(windowHeight/2)); 
    $('body').scrollLeft(($('#map-container').width()/2)-(windowWidth/2));

FIDDLE

來源

2014-06-20 15:16:19 Trevor

好主意滾動到中心，這是完美的，謝謝你！ – Nathan

您可以將#map-inner-container的寬度設置爲100%和overflow-x屬性設置爲auto。當你的#map-container比你#map-inner-container內的圖像較小它將滾動條增加的底部你#map-inner-container，讓您可以滾動查看您的圖像的左側和右側。我已經改變了你的#map-container到900px的寬度來模擬這一點。

#map-container{ z-index:-9000; width:900px; height:1414px; }

#map-inner-container { position:relative; width: 100%; overflow-x: auto; overflow-y: hidden; }

爲了初始顯示圖像的中心，而不是左邊，你可以使用jQuery的.scrollLeft方法

$("#map-inner-container").scrollLeft(500);

，你認爲合適，您可以更改值500。

例子：http://jsfiddle.net/Lt4PW/4/

來源

2014-06-20 15:06:39 Jop

將比屏幕寬的div對齊中心到屏幕中心

回答

相關問題