Html 将我的大照片居中对齐，无负边距

我创建了一个tumblr主题，其中所有内容都以660像素为中心

然而，我也发布了940px宽的大型图像，并通过给它-140px（940-660/2）的负边缘来居中，但这并不理想，因为我必须发布所有图像作为这个维度，或者它们只是左对齐

滚动至“我的网站”底部以查看未正确对齐的图像：

css：

        section {display: block; clear: both; margin: 0 auto;width: 660px;}

        article img {clear: both; max-width: 940px; margin-left: -140px;}

---

谢谢你的帮助

您可以在这两种解决方案中进行选择：

标记：

<div id="content">
  <div class="a"><div class="b">
    <img src="http://placekitten.com/100/100">
  </div></div>
  <div class="a"><div class="b">
    <img src="http://placekitten.com/2000/100">
  </div></div>

显示：表格

方式：

显示：内联块

方式：

---

​享受：）

这是无限卷轴：

以下是大于容器默认宽度的图像的左边距脚本：

    <!--Dynamicaly center big images-->
    <script>
    $(window).load(function() {
        $(function() {
            $('img').css('marginLeft', function(index, value){
                if($(this).width() > 660) {
                    return -($(this).width() - 660)/2;
                }
                return value;
            });
        });
    });
    </script>

$（窗口）。加载（函数（）{
$（函数（）{
$（'img'）.css（'marginLeft'，函数（索引，值）{
如果（$（this）.width（）>660）{
返回-（$（this）.width（）-660）/2；
}
返回值；
});
});
});

---

我唯一需要弄清楚的是如何在动态加载的图像上执行相同的功能，因为我有无限滚动（比如，在你进入页面之前，底部的图像不会被加载。

研究使用javascript动态定位元素。好吧，这并不完美，因为它在页面上添加了一个长的水平滚动条。是的，然后它不会对齐小于#content中指定宽度的图像（就像200px的图像不会与我在每篇文章/平面设计师极客开头的红线齐平一样；）谢谢你，尽管是Biziclop！你准备容忍多少“不必要的”标记来达到这种效果？：）哈哈，开始吧！我也可以只针对940px宽的图像，用JavaScript的负边距，来处理较小的图像，对吗？我可以一直发布940px宽的图像，继续往下看：）哇：）谢谢……这个地方太棒了。如果你修复了一个图像，给它加一些类，像

。固定边距

。加载一组新图像时，只需修复

img:not（.fixed margin）

。或者您可以收听

域节点插入

或类似事件：

.a .b {
    display: table;  /* shrink-wrap to content (= the image) */
    width:   300px;  /* content width, acts as min-width when display:table */
    margin:  0 auto; /* center inside the (2*9999+300)px area */
}

.a {
    /* center content (= the image wrapped into .b) */
    text-align: center;
}
.a .b {
    display:    inline-block; /* shrink-wrap to content (= the image) */
    min-width:  300px;        /* content width */
    text-align: left;         /* if image is smaller than the content */
}

    <!--Dynamicaly center big images-->
    <script>
    $(window).load(function() {
        $(function() {
            $('img').css('marginLeft', function(index, value){
                if($(this).width() > 660) {
                    return -($(this).width() - 660)/2;
                }
                return value;
            });
        });
    });
    </script>