在绝对定位的div中居中显示div

Question

在绝对定位的div中居中显示div

4

请查看此链接： 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背景放置菜单...

这是我的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;
}

我错在哪里了？

演示

- Preston

4个回答

4

将 #menu 的 left: 50% 删除，添加 margin: 0 auto; 到该 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

- Sparky

黄色的 div 必须覆盖在红色的 div 上面... 这个 div 包含一个带有菜单的透明图片... - Preston

@Preston，请更新您的原始问题以更好地解释您的要求。 - Sparky

0

不太清楚你想问什么，但可以试试这个：

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;
}

- srijan

但是在红色部分，我有一个<ul><li>图像</li></ul>用于背景过渡... - Preston

你在红色区域有列表吗？当你点击列表项时，黄色区域的内容会改变吗？这是你想说的吗？ - srijan

我已经更新了我的问题...看这个...请...关于你上一个问题...不是的...黄色区域只接收菜单链接和标志... - Preston

-1

试试这个：

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

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

- WoLfulus

完全正确，但是这种方式能够在 #animation 中使用图像转换吗？我会像这样使用： - Preston

为什么不呢？这里的问题在于你必须准确地展示你想要实现什么，这样我们才能给出更好的答案。 - WoLfulus

我已经更新了我的问题。请看我所做的例子...但是“黄色”div不在中心位置...对于造成的困惑，我很抱歉... - Preston

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brett DeWoody · Accepted Answer

您是想要做这个吗？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;
}