Centrer un div flottant

Question

Je suis bloqué. Voici ce que j'ai en cours, j'ai un widget de partage AddThis à côté d'une image principale sur une page Web. L'image change de taille et j'ai besoin de l'AddThis pour changer son emplacement avec l'image de façon dynamique. J'ai demandé cela au another question et à travers un autre forum, j'ai pu obtenir de l'aide. Maintenant, AddThis et l'image s'alignent correctement et tout semble aller dans la bonne direction, mais l'image n'est plus centrée. J'ai besoin que cette image soit centrée sur la page mais je n'arrive pas à comprendre comment faire cela car j'ai dû faire flotter la div contenant l'image et AddThis. Voici le code 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> 

Des idées pour centrer cela? Je peux utiliser une solution CSS droite ou une solution utilisant jQuery et CSS. S'il vous plaît fournir des exemples. Il s'agit d'un JSFIDDLE of the page.

Here is a page qui a le code le plus à jour que je tente.

Answer 1

essayez ceci:

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

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

Answer 2

Je ne suis pas sûr que le contenu de votre 'im-centre', depuis que j'ajoute un style en ligne (text-align: center;) comme ci-dessous, testé et fonctionne très bien sur à savoir 8.

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

Définir une largeur fixe pour le centre div serait OK, si cela ne nécessite pas une largeur fixe, la solution jquery @ Raminson est meilleure. Je veux vraiment savoir si nous pouvons mettre en œuvre ce avec css pur

<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

Essayez d'appliquer margin: 0 auto; règle CSS à la div.