Центрирование плавающего div

Question

Я застрял. Вот что я делаю, у меня есть виджет добавления AddThis рядом с основным изображением на веб-странице. Изображение меняет размеры, и мне нужно AddThis для динамического изменения его размещения с изображением. Я спросил об этом в another question, и через другой форум я смог получить некоторую помощь. Теперь AddThis и изображение выравниваются правильно, и все, кажется, идет в правильном направлении, однако изображение больше не центрируется. Мне нужно, чтобы этот образ был сосредоточен на странице, но я не могу понять, как это сделать, потому что мне пришлось плавать div, содержащий изображение и AddThis. Вот 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

Я не уверен, что содержание вашего «им-центра», так как я добавить встроенный стиль (выравнивания текста: центр;), как показано ниже, протестировали его и прекрасно работает, т.е. 8.

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

Определить фиксированную ширину для центра div будет ОК, если это не требует фиксированной ширины, то решение jQuery @ Raminson лучше. Я действительно хочу знать, если мы можем реализовать это с чистым 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.