2013-08-20 2 views
1

Я хотел бы, чтобы центрировать серый DIV между этой зеленой дивой:Как центрировать div, зажатый между двумя абсолютными div?

http://i.stack.imgur.com/iRgwl.png

Я делал все, что я могу думать, но я едва могу сделать правильный способ выровнять DIV в центре.

вот мои коды:

HTML:

<div id="header"> 
    <div id="header_pattern"></div> 
    <div id="header_menu"> 
    <div id="menu_wrap">Contejnt for id "header_menu" Goes Here</div> 
    </div> 
</div> 
<div id="container"> 
    <div id="main_photo">Content for id "container" Goes Here</div> 
</div> 
<div id="footer"> 
    <div id="footer_main">Content for id "footer_main" Goes Here</div> 
</div> 

CSS:

#header { 
    height: 150px; 
    margin: 0px; 
    padding: 0px; 
    position: absolute; 
    width: 100%; 
    left: 0px; 
    top: 0px; 
    float: left; 
    z-index: 900000; 
} 
#header_pattern { 
    height: 50px; 
    width: 100%; 
    left: 0px; 
    top: 0px; 
    background-image: url(images/head_pattern.png); 
    background-repeat: repeat-x; 
    background-attachment: fixed; 
} 
#header_menu { 
    background-color: #19350f; 
    height: 50px; 
    width: 100%; 
    left: 0px; 
    top: 50px; 
} 
#container { 
    height: 850px; 
    width: 960px; 
    top: 100px; 
    background-color: #666; 
    position: absolute; 
    margin-right: auto; 
    margin-left: auto; 
    left: auto; 
} 
#main_photo { 
    height: 450px; 
    width: 960px; 
} 
#footer { 
    height: 150px; 
    width: 100%; 
    position: absolute; 
    left: 0px; 
    top: 950px; 
    background-color: #2f772f; 
} 
#menu_wrap { 
    height: 50px; 
    width: 960px; 
    margin-right: auto; 
    margin-left: auto; 
} 
#footer_main { 
    height: 150px; 
    width: 960px; 
    margin-right: auto; 
    margin-left: auto; 
} 

пожалуйста ответ с ответом как можно скорее, спасибо. :)

ответ

0
#container { 
height: 850px; 
width: 960px; 
top: 100px; 
background-color: #666; 
position: absolute; 
margin-left: -480px; 
left: 50%; 
} 
+0

до сих пор это работает. спасибо –

+0

отлично ... дайте мне знать, если он продолжит :). Рад был помочь! – AdityaSaxena

1

left:0; Просто добавьте и right:0; к #container тегу

#container { 
height: 850px; 
width: 960px; 
top: 100px; 
background-color: #666; 
position: absolute; 
margin-right: auto; 
margin-left: auto; 
left: auto; 
left: 0; 
right: 0; 
} 

он будет делать, что вещь

0
#container { 
    margin-left:auto; 
    margin-right:auto; 
} 
Смежные вопросы