Geek asks and answers

Center a floating div

I am stuck. Here's what I do, I have a AddThis add widget next to the main image on the web page. The image is resized, and I need AddThis to dynamically change its placement with the image. I asked this in another question , and through another forum I managed to get some help. Now AddThis and the image align correctly, and everything seems to be going in the right direction, however the image is no longer centered. I need this image to be focused on the page, but I can’t figure out how to do it 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>

, ? CSS jQuery CSS. .

JSFIDDLE .

, , .

+3
3

:

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

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

+1

"im-center", (text-align: center;), , , .. 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>​​​
-1

Try applying the CSS rule margin: 0 auto;to the div.

-4
source

More articles:


All Articles