Question

我有一个嵌套在几个div中的图像。图像的宽度为2000px，当浏览器的宽度设置为小于页面加载时的宽度时，我希望图像的中心与屏幕的中心对齐，并能够向左/向右滚动查看图像的其余部分。我还需要粉红色的边框div来跟随图像，保持与现在相同的位置（Square需要留在英国和波兰的圈子上）。

我有一个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/

我在这里看了很多其他类似的问题，并尝试了所有的解决方案，但它们似乎都没有效果。通过让图像的中心与scree的中心对齐，我确实关闭了一次，但是在添加overflow:auto时无法滚动。

我发现的所有其他解决方案都只使用css，在img的外部div上有left:50%和margin-left:-1000px /*half of width*/之类的东西，但是因为这样的事情对我来说不起作用，我是开放的到JavaScript / jQuery解决方案，或纯css，如果它工作。

我非常感谢帮助，因为我不知所措！：（

Answer 1

使用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

Answer 2

您可以将#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/

将宽于屏幕的div的中心对齐到屏幕中心

2 个答案: