如何在 div 中将图像居中？答案

【问题标题】：How to center an image in a div?如何在 div 中将图像居中？
【发布时间】：2013-10-02 03:52:57
【问题描述】：

我在一个较小的 320x460px div 中显示 1000x1000px 的图像，并带有溢出：自动，因此您可以在 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>

【问题讨论】：

div 是否包含除您希望居中的图像以外的任何其他内容？
试试 text-align:center;
尝试改变在样式中的位置
嗨，马特，不仅仅是图片。
您的代码在哪里？请把它贴在这里..现在这里的每个用户都在猜测，因为你没有提供相关的代码。

标签： css image html

【解决方案1】：

您可以为容器 div 分配 320 像素的宽度和 460 像素的高度。然后在 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%;}

【讨论】：

【解决方案2】：

如果您要在 100% 的时间内使用相同尺寸的图像，您可以绝对定位它。

.className {
  height: 460px;
  position: relative;
  overflow: hidden;
  width: 320px;
}
.className img {
  left: 50%;
  margin: -500px 0 0 -500px;
  position: absolute;
  top: 50%;
}

我已经在 1000px x 1000px 的图像上解决了这个问题。

另外，我已经将 jsFiddle 放在一起供您查看。

http://jsfiddle.net/7x2JR/

【讨论】：

谢谢 Andrew，它工作得很好，但我会有不同尺寸的图像，所以这不是我所需要的。

【解决方案3】：

我认为您正在尝试将div 滚动到img 的中心。

您需要使用 Javascript 属性 scrollTop 和 scrollLeft

要滚动到中心，您需要将值设置为

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

JS：

var element = document.getElementById('container'); /* This is your div */

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

查看JSFiddle

【讨论】：

嗨 Nikhil，非常感谢，它在小提琴中完美运行，但我无法让它在我的网络应用程序中运行？在我的索引文件中，我使用 jquery.load 加载地图页面，但它没有滚动图像？！
检查滚动事件是在加载之后还是之前发生。我建议在加载后将滚动作为回调事件。
我正在测试不同的东西，但即使我 .load 页面并且在该页面中具有在页面加载后运行的功能并且我将 scrollHeight 设置为固定数字，元素。 scrollTop 在警报中显示为 0？
如果你得到scrollTop值，即alert(element.scrollTop)，它将显示当前滚动值，这将是0，因为div没有滚动。您不必设置scrollHeight，它会自动计算。改为设置scrollTop 的值。
我不知道我哪里出错了，但是 element.scrollHeight 和 width 没有得到任何价值。所以为了测试，我想我会设置一些静态数字来测试。

【解决方案4】：

检查background-position 属性。

您也可以使用background-size: cover（或包含）使其适合您的 div。

【讨论】：

嗨 Rachid，我不能使用背景，它必须是 img。
哦，好吧。包含图像的 div 上的文本对齐中心怎么样？

【解决方案5】：

div img
{
margin:auto;
width:320px;
height:460px;
vertical-align:middle;
}

【讨论】：

谢谢，但是在较小的 div 中居中较大的图像与在较大的 div 中居中的小图像不同，它的工作方式不同。
现在我明白了..give padding:50px;overflow:hidden;..... 它会在溢出时从四面八方提供 50 px 的空间和滚动条..跨度>

【解决方案6】：

你为什么不试试：

text-align:center;

【讨论】：

谢谢，但是在较小的 div 中居中较大的图像与在较大的 div 中居中的小图像不同，它的工作方式不同。

【解决方案7】：

我认为scrollTop 是您正在寻找的属性，看看这个 SO 问题：Scroll Position of div with "overflow: auto"

（实际上，您并不想将图像在 div 内居中，而是将 div 滚动到中心。）

【讨论】：

【解决方案8】：

试试这个

    <div text-align:center">
    <img src="img.png">
    </div>

【讨论】：

很明显；试试 HTML 验证器？