3

我被困住了。这就是我正在做的事情，我在网页上的主图像旁边有一个 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。

这是一个包含我正在尝试的最新代码的页面。

4

3 回答 3

1

试试这个：

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

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

于 2012-05-24T03:59:49.293 回答
-1

我不确定你的 '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>​​​
于 2012-05-24T02:36:33.110 回答
-4

尝试将margin: 0 auto;CSS 规则应用于 div。

于 2012-05-24T02:47:44.477 回答