Центр более широкий div в более узком

Question

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

У меня есть один div и еще один внутри него, который шире родительского.

#narrow div имеет сменную ширину, а div #wide имеет фиксированную ширину.

Как центрировать #wide DIV внутри #narrow DIV так, что как левая и правая сторона #wide DIV обрезаются, когда #narrow дается overflow:hidden?

Answer 1

Легко с помощью CSS:

#narrow {overflow: hidden;}

Answer 2

Попробуйте это:

#wide{margin:0px auto; position: relative;} 

Это будет держать ваш широкий DIV в центре экрана, независимо от того, насколько широко вы сделаете другой. Он также будет сидеть в верхней части экрана.

Answer 3

Вы можете центрировать широкий div, используя position: absolute, а затем используя отрицательный margin-left, чтобы разместить его по центру. Обратите внимание, что это работает только тогда, когда элемент имеет фиксированную ширину.

JS-Fiddle

#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.