html - 幅の広い div を幅の狭い div の中央に配置する

Question

<div id="narrow">
   <div id="wide">
   </div>
</div>

私は 1 つの div と、その中に親よりも広い別の div を持っています。

divの#narrow幅は変更可能で、#widediv の幅は固定です。

が指定されたときに #wide div の左側と右側の両方がトリミングされるよう#wideに、div を div 内の中央に配置するにはどうすればよいですか?#narrow#narrowoverflow:hidden

Answer 1

幅の広い div を中央に配置するにposition: absoluteは、マイナスmargin-leftを使用して中央に配置します。これは、要素の幅が固定されている場合にのみ機能することに注意してください。

JS-フィドル

#narrow {
    position: relative;
    width: 200px; //may be variable
}

#wide {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -150px; // half the width
    width: 300px; // must be fixed
}

狭い div に流れている部分を非表示にするには、 を使用できますoverflow: hidden。

Answer 2

CSSで簡単：

#narrow {overflow: hidden;}