0

基本上我有一个宽度为 512 像素、高度为 336 像素的 div。我希望这个 div 始终位于屏幕的中心。如果浏览器窗口小于这些尺寸，我希望滚动条启动，以便用户可以看到所有内容。

目前我已经设法将我的 div 放在中心位置，我设置了 min-width/min-height，高度工作正常，但由于某种原因 min-width 不是。似乎滚动条正在显示，但内容在左侧被剪辑，我不知道为什么。

我在这里敲了一个jsfiddle （尝试重新调整窗口大小，使内容大于浏览器窗口，你会看到问题）

HTML：

<div id="vert-wrapper">
    <div id="wrapper">        
        <img src="http://lorempixel.com/512/336/" width="512" height="336" />
    </div>
</div>

和CSS：

#vert-wrapper { width: 512px; min-height: 336px; height: 100%; position: absolute; left: 50%; margin-left: -256px; }
#wrapper { width: 100%; min-width: 512px; height: 336px; position: absolute; top: 50%; margin-top: -158px; }

任何帮助，将不胜感激。谢谢。

4

1 回答 1

1

这是因为留有余量。您的容器越来越小，您尝试设置的边距太大。尝试使用媒体查询。我试过了，它似乎有效，你的图片似乎整个可见。我把你图片的宽度作为查询的限制并取消所有边距：

@media (max-width:512px){
    #vert-wrapper {left:0%; margin-left:auto; }
}
于 2013-02-17T15:49:49.047 回答