中心对齐我的大照片，没有负边距

Question

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

但是，我也发布了940像素宽的大图像，并且通过给它一个-140像素（940-660/2）的负边距来对中，但这不是理想的，因为我必须全部发布图像作为这个尺寸，或者他们只是左对齐。

滚动到我的网站底部看到没有正确对齐的图像：http://seans.ws

的CSS：

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

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

感谢您的帮助！

Answer 1

可以这两种解决方案之间进行选择：

标记：

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

常见的CSS：

#content { 
    width: 300px; 
    margin: 0 auto; 
    border: 1px solid blue; 
} 
.a { 
    /* extend image area */ 
    margin-left :-9999px; 
    margin-right:-9999px; 
    /* but without scrollbars */ 
    position: relative; 
    left: -9999px; 
} 
.a .b { 
    /* undo scrollbar-removing positioning */ 
    position: relative; 
    left: 9999px; 
} 

的display: table方式：

http://jsfiddle.net/ZhEku/3/

.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 */ 
} 

的display: inline-block方式：

http://jsfiddle.net/ZhEku/4/

.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 */ 
} 

享受:)

Answer 2

这里的无限滚动JS：http://static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js

这里是较大的图像我利润率左脚本比容器的默认宽度：

<!--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> 

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