3

列が固定幅の中央揃えの div である単一列レイアウトがあります。親をオーバーフローする列内に幅の広い div を配置したいのですが、親の中央に配置します。概念的には、次のようなものです。

<div style="width: 100px; margin: 0 auto; overflow:visible;" id="parent">
    <div style="width: 400px; margin 0 auto;" id="child"></div>
</div>

中央揃えは、子 div が親よりも細い限り機能しますが、大きくなると、何らかの理由で常に親と左揃えになります。

4

5 に答える 5

4 

#wrapper {
  margin: 0 auto;
  width: 200px;
  background-color: #eee;
  position: relative;
  height: 200px;
}

#child {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -200px;
  width: 400px;
  background-color: #ddd;
}
<div id="wrapper">
  <div id="child">Child div</div>
</div>

jsフィドル

要素が親をオーバーフローする場合、右にのみオーバーフローするのが通常の動作です。たとえば、ビューポートよりも広いサイトがある場合、左にスクロールする必要はなく、右にスクロールするだけです。このソリューションは、左マージンが負の絶対中央の div に基づいています (その値は、彼自身の幅の半分です)。したがって、この要素の幅がわかっている場合、このソリューションは問題ありません。

FF 3.6、IE7、IE8 でテスト済み

于 2010-10-18T11:09:34.387 に答える
3

Justusのソリューションのバリエーションを作成しました。相対配置の代わりに、内側の要素に 50% の負のマージンを使用しました。

#wrapper {
    margin: 0 auto;
    padding: 10px 0 10px;
    width: 200px;
    background-color: #eee;
}
#child {
    margin: 0 -50%;
    width: 400px;
    background-color: #ddd;
}

この方法では、要素のサイズを事前に知る必要はありません。

于 2010-10-18T11:31:26.220 に答える
0

100％確信はありませんが、親要素にrelative子に設定された位置を指定してから、子divのプロパティを設定absoluteしてみてください。topleftwidth/height

于 2010-10-18T11:02:19.873 に答える
0

これが私がそれを解決する方法です：

http://jsfiddle.net/WPuhU/1/

また、スクロールバーにも注意してください (ウィンドウ ビューがオーバーフロー div よりも小さい場合は表示されません)。オーバーフローした div を自動的に中央揃えにします。

CSS:

#center-3 {height:40px;background-color: #999;}
#center-1 {height:20px;top:10px;background-color: #aaa;}

/* the necesary code */
body {width:100%;margin:0;}
#center-4 {
    width: 100%;
    overflow:hidden;  
    /* remove the next 2 line for a normal flow */
    position: absolute;
    z-index: -1;
}
#center-3 {
    position: relative;
    margin: 0 auto;
    width: 200px;
}
#center-2, #center-1 {
    position: relative;
    width: 400px;
}
#center-2 {
    left: 50%;
}
#center-1 {   
    left: -50%;
}

html:

 <div id="center-4">
    <div id="center-3">
        <div id="center-2">
            <div id="center-1"></div>
        </div>
    </div>
</div>
<div id="other-stuff">Here comes the other stuff above.</div>
于 2013-06-08T17:27:29.990 に答える