以浮動div為中心

Question

我被卡住了。 這是我發生的事情，我在網頁上的主圖像旁邊有一個AddThis共享小部件。 圖像會改變大小，我需要使用AddThis動態更改圖像的位置。 我在另一個問題中問過這個問題 ，通過另一個論壇，我得到了一些幫助。 現在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 。

這是一個包含我正在嘗試的最新代碼的頁面 。

Answer 1

嘗試這個：

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

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

Answer 2

我不確定你的'im-center'的內容 ，因為我添加了一個內聯樣式（text-align：center;），如下所示，測試它並在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。