中心對齊我的大照片，沒有負邊距

我創建了一個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;}

感謝您的幫助！

來源

2012-07-01 Sean Thompson

研究使用javascript來動態定位元素。 –

可以這兩種解決方案之間進行選擇：

標記：

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

享受:)

來源

2012-07-01 19:41:23 biziclop

好吧，它並不完美，因爲它在頁面上添加了一個水平滾動條。 – biziclop

是的，然後它不會對齊小於#content中指定寬度的圖像（就像200像素的圖像不會與我在每個帖子/圖形設計器怪胎開頭處的紅線齊平;）謝謝Biziclop！ –

爲了達到這個效果，你準備好容忍多少「不必要」的標記？ :) – biziclop

這裏的無限滾動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>

我唯一需要弄清楚的是如何在動態加載的圖像上執行相同的功能，因爲我有無限滾動（就像底部圖像在下載頁面之前不加載）。

來源

2012-07-01 20:47:08

如果您修復了圖片，請爲其添加一些類，如'.fixed-margin'。當一堆新的圖像加載時，只需修復'img：not（.fixed-margin）'。或者你可以聽'DOMNodeInserted'或類似的事件：http://stackoverflow.com/questions/2143929/domnodeinserted-equivalent-in-ie – biziclop

中心對齊我的大照片，沒有負邊距

回答

相關問題