css - 如何在div中将图像居中？

Question

我在一个较小的 320x460 像素的 div 中显示一张 1000x1000 像素的图像，并设置了 overflow:auto，这样你就可以在 div 中滚动图像。当我加载页面时，图像从图像的左上角开始显示，我想知道如何将图像居中显示？

感谢任何意见，谢谢。

这是代码。在我的索引文件中，我像这样加载页面:

$('#kartamap').load('imagemap.html', function() {
                    alert(".load has loaded");  
                    imagescroll();                                                                     

                           });

这是我的页面。

<div id="themap">

 <div id="imagediven" style="height:460px; width:320px;">

  <img src="image.png" width="1000px" height="1000px"/>

  </div>

<style>
#imagediven {
    overflow:auto;
    height:460px;
    width:320px;
    position:relative;
}

</style>

    <script type="text/javascript">

    function imagescroll(){
    var element = document.getElementById('imagediven'), /* This is your div */
            scrollHeight = element.scrollHeight,
            scrollWidth = element.scrollWidth;
        clientHeight =$(window).height();
            clientWidth = $(window).width();

        alert(scrollHeight);//this is not displaying the image height?
        alert(clientHeight);//this is getting a value off the screen

    element.scrollTop = (scrollHeight - clientHeight) / 2;
    element.scrollLeft = (scrollWidth - clientWidth) / 2;
    }

    </script>

</div>

Answer 1

您可以为容器 div 分配 320px 宽度和 460px 高度。然后在 css 中为您的图像应用 25% 的边距...它将使您的图像从各个方向居中对齐。

这是HTML

<div id="img">
 <img src="Chrysanthemum.jpg" />
</div>

这是CSS

div#img
{
width:320px;
height:460px;
overflow:scroll;

}
div#img img{margin:0 auto;padding:0;margin:25%;}