居中浮動div

Question

我被卡住了。這是我正在做的事情，我在網頁上的主圖像旁邊有一個AddThis共享窗口小部件。圖像更改大小，我需要AddThis以動態更改其與圖像的位置。我在another question問過這個問題，通過另一個論壇我可以得到一些幫助。現在AddThis和圖像對齊正確，一切似乎都朝着正確的方向，但圖像不再居中。我需要這個圖像集中在頁面上，但我不知道如何做到這一點，因爲我不得不浮動包含圖像和AddThis的div。這裏是HTML：

<div class="feature-container"> 
<div style="min-height:100px; min-width:100px; position:relative; float:left; "> 
<div style="text-align:center;"><img class="feature-image" 
    src="/Images/test.jpg" width="300px;" alt="test" /></div> 
<div style="position:absolute; bottom:0px; right:-40px;"> 
    <div class="addthis_toolbox addthis_floating_style addthis_16x16_style"> 
     <a class="addthis_button_facebook"></a> 
     <a class="addthis_button_twitter"></a> 
     <a class="addthis_button_email"></a> 
     <a class="addthis_button_compact"></a> 
     </div> 
    <script type="text/javascript" src="http://s7.addthis.com/js/300 
       /addthis_widget.js"></script> 
</div> 
</div> 
</div> 

任何想法如何居中？我可以使用直接的CSS解決方案或使用jQuery和CSS的解決方案。請提供例子。

這裏是JSFIDDLE of the page。

Here is a page這是我嘗試使用的最新代碼。

Answer 1

試試這個：

var pos = $('.center').width() - $('img').width(); 
$('.center').css('margin-left', pos); 

http://jsfiddle.net/WY9YX/4/

Answer 2

我不知道你的「IM-中心」的內容，因爲我添加的內嵌樣式（文本對齊：中心;）如下，測試它和IE 8

<div class="img-center" style="text-align:center;"> 
    <img src="test.jpg" alt="test" /> 
</div> 

工作正常

定義中心div的固定寬度可以，如果這不是一個固定的寬度，@ Raminson的jquery解決方案更好。我真的很想知道，如果我們能夠實現這個純CSS

<div id="top" class="wrap_fullwidth"> 
    <div class="center" style="width:400px;"> 
<div style="min-height:100px; min-width:100px; position:relative; float:left; "> 
    <div style="text-align:center;"><img src="http://www.ubhape2.com/Images/test.jpg" alt="test" /></div> 
    <div style="position:absolute; bottom:0px; right:-40px;"> 
     <div class="addthis_toolbox addthis_floating_style addthis_16x16_style"> 
      <a class="addthis_button_facebook"></a> 
      <a class="addthis_button_twitter"></a> 
      <a class="addthis_button_email"></a> 
      <a class="addthis_button_compact"></a> 
      </div> 
     <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script> 
    </div> 
</div> 
</div> 

</div>​​​ 

Answer 3

嘗試應用margin: 0 auto; CSS規則到div。