0

画像の背景位置を左に50％にすると、背景画像が中央に配置されますが、絶対位置の要素に50％左に配置しても、div要素が中央に配置されないのはなぜですか。

コードは次のとおりです。

<div style="position:relative;height:100px; background:url(images/demo.jpg) no-repeat 50% 0">
   <div style="min-height:40px; width:140px; background-color:#aaa;position:absolute;top:0;left:50%;">
        heloo this is just a demo
  </div>

4

3 に答える 3

2

プロパティで宣言されている相対的な配置では、配置されてbackground-positionいる画像の寸法が考慮されますが、CSSの位置プロパティ（top,right,bottom,left）を使用する場合は、相対的な親の寸法のみが考慮されます。

それについて考える良い方法は、最小値と最大値を使用することです。

  1. 0％の場合、効果は同じです。
    • 背景に配置された画像は、含まれている要素の左端を抱きしめます
    • 絶対に配置された要素は、相対的な親の左端を抱きしめます
  2. 100％の場合、効果は明ら​​かに異なります。
    • 背景に配置された画像は、含まれている要素の右端を抱きしめます
    • 絶対位置にある要素の左端は、相対的な親の右端と一致します

問題を解決するために、要素の幅の半分の負のマージンを2番目のdivに追加できます。

margin-left: -70px;
于 2013-02-26T16:17:25.907 に答える
0

子の左側は、 。を使用して親のdiv半分になります。子供の使用を中心に、divleft: 50%;divleft: 50%;margin-left: -(half the width of child div)

于 2013-02-26T16:18:32.437 に答える
0

物事を単純にするために、代わりに単に削除position:absolute;top:0;left:50%;して使用することをお勧めしmargin: 0 auto;ます。

于 2013-02-26T16:26:22.663 に答える