Question

请参阅此链接...：Exemple

在这个网站上我有这个代码

    <body>
    <div id="geral">
        <div id="animacao">
            <ul id="banners"> 
                <li><img src="banners/banner_1.jpg" alt="Banner 1" /></li>
                <li><img src="banners/banner_2.jpg" alt="Banner 2" /></li>
            </ul>
        </div>
        <div id="menu">

        </div>              
    </div>
</body>

#geral位于屏幕中央 -

#animacao具有相同大小的#geral，其上有动画图像和淡入淡出效果..

#menu有271像素且需要保持在#geral和#animacao的中心，在此我将把菜单与PNG bakcground ....

这是我的CSS，可能不起作用......

#geral{
    position: absolute;
    width:990px;
    height:530px;
    top:50%;
    left:50%;
    margin-top:-265px;
    margin-left:-495px;
    background: url(../imagens/fundo.jpg) no-repeat;
}

#animacao{
    position: relative;
    width:990px;
    height:530px;
}

#menu
{
    position: absolute;
    left: 50%;
    width:271px;
    height:530px;
    margin-left:-135px;
    background-color:yellow;
    z-index: 10;
}

我哪里错了？

Demo

Answer 1

这是你想要做的吗？ http://jsfiddle.net/brettdewoody/C4jSS/

或者您是否希望#menu div位于#animacao？

之上

HTML

<div id="geral">
    <div id="animacao">
        <div id="menu">

        <div>
    </div>       
</div>

CSS

#geral{
    position: absolute;
    width:990px;
    height:530px;
    top:50%;
    left:50%;
    margin-top:-265px;
    margin-left:-495px;
    background-color: black;
}

#animacao{
    position: relative;
    width:990px;
    height:530px;
    background-color: red;
}

#menu{
    position: relative;
    margin:0 auto;
    width:271px;
    height:530px;
    background-color:yellow;
    z-index: 10;
}

Answer 2

删除left: 50%并将margin: 0 auto;添加到#menu div。

#menu{
    position: relative;
    margin: 0 auto;
    width:271px;
    height:530px;
    background-color:#FFF;
    z-index: 10;
}

http://jsfiddle.net/qmAN5/2/

http://jsfiddle.net/qmAN5/2/show

Answer 3

不知道你想要问什么，但试试这个：

HTML：

<div id="geral">
<div id="animacao">fdgdf</div>
</div>
<div id="geral">   
<div id="menu">dfgdf     </div> 
</div>

CSS

@charset "utf-8";
/* CSS Document */

#geral{
    width:990px;
    margin-left:auto;
    margin-right:auto;

    background: #99CCCC;
}

#animacao{

    float:left;
    width:100%;
    height:530px;
    background:#FFCCCC;
}

#menu{
    margin-left:auto;
    margin-right:auto;
    width:271px;
    height:530px;
    background-color:#FFF;
    z-index: 10;
    border:#000000 1px solid;
    display:table;
}

Answer 4

试试这个：

http://jsfiddle.net/qmAN5/3/

我将#menu放在#animacao中，因为该位置是相对于其父级的。并添加了margin-left以调整位置。

中心div在绝对div内

4 个答案: