3

ハマった。これが私が行っていることです。Webページのメイン画像の横に 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

以下のようにインラインスタイル（text-align：center;）を追加したため、 「im-center」の内容がわかりません。テストして、IE8で正常に動作します。

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

center 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;div に CSS ルールを適用してみてください。

于 2012-05-24T02:47:44.477 に答える