1

wop Web サイトにブックマークレットを追加しようとしています。問題は、ブックマークレット (下の図で赤で強調表示されている) を、矢印が横に突き出ていないかのように中央に配置したいということです。css で bgimage の幅を変更すると、下のインデントされたボックスのものと同じになり、希望どおりに中央に配置されます。しかし、それは矢を少し切り取ります。それで、私の質問は、ブックマークレットが他のインデントされたボックスのものの幅を持っているかのように、ブックマークレットを中央に配置するにはどうすればよいかということです。

ここに画像の説明を入力

ブックマークレット CSS:

#bookmarklet {
    background-image:url('images/bookmarklet.png');
    width:425px;
    height:175px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:8px;
}

ブックマークレットを（矢印の側面を切り取らずに）あたかも中央に配置したい：

#resultbg {
    background-image:url('images/resultbg.png');
    width:404px;
    height:347px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    padding-top:8px;
}

どんな助けでも大歓迎です！ありがとうございました（：

4

3 に答える 3

1

矢印がボックスから「突き出ている」ピクセルの量を測定し、それを 2 で割り、左余白にします。

それが私の頭に浮かんだ最初のことです。ただし、最初に画像を中央に配置するために左マージンを使用しています。おそらくコンテナ div を作成し、この div を margin-left: auto と margin-right: auto で中央に配置してから、この div 内の画像のマージンを操作します。それはうまくいくはずです

于 2012-06-18T03:06:53.107 に答える
1

追加するだけ

background-position:center;

センタリングするはずの背景に

于 2012-06-18T03:07:20.603 に答える
0

いくつかのオプション:

  1. 画像の幅を縮小し、横に余白を追加して、画像が途切れないようにします。
  2. 画像を div でラップし、幅を設定して、背景画像が必要に応じてパディングまたはマージンを使用して配置されるようにします。
于 2012-06-18T03:12:34.690 に答える