Question

I am stuck. Here is what I have going on, I have an AddThis sharing widget next to a main image on a webpage. The image changes sizes and I need the AddThis to change its placement with the image dynamically. I asked this in another question and through another forum I was able to get some help. Now AddThis and the image align properly and everything seems to be going in the right direction, however the image is no longer centered. I need this image to be centered on the page but I cannot figure out how to do this because I had to float the div containing the image and AddThis. Here is the 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>

Any ideas how to center this? I can use a straight CSS solution or a solution using jQuery and CSS. Please provide examples.

Here is a JSFIDDLE of the page.

Here is a page that has the most up to date code I am attempting.

Answer 1

try this:

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

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