html - CSS 自动边距不适用于绝对定位的元素

Question

所有其他 div 都运行良好，但是当我到达这一点时它出于某种原因不想将其居中？我错过了什么吗？

查看图片链接。菜单项是我想要将自动边距设置为的内容。 ehigh 的边距有效，但两侧无效。

http://i.imgur.com/PckN9jX.jpg

.Menuitems {
    position:absolute;
    margin: 120px auto;
    width:398px;
    height:26px;
    z-index:11;
	border-style: solid;
}

#mitem1 {
    position:absolute;
    background-image:url(http://i.imgur.com/cyKwZQj.png);
    background-repeat:no-repeat;
    background-position:center;
    top:0;
    left:0;
    width:75px;
    height:26px;
    z-index:6
}

#mitem1:hover {
    background-image:url(http://i.imgur.com/BMHScgr.png);
    background-repeat:no-repeat;
    background-position:center
}

#mitem1:active {
    background-image:url(http://i.imgur.com/4Y4sMtq.png);
    background-repeat:no-repeat;
    background-position:center
}

#mitem2 {
    position:absolute;
    background-image:url(http://i.imgur.com/GiAoMqC.png);
    background-repeat:no-repeat;
    background-position:center;
    top:0;
    left:77px;
    width:75px;
    height:26px;
    z-index:7
}

#mitem2:hover {
    background-image:url(http://i.imgur.com/XQKv9yC.png);
    background-repeat:no-repeat;
    background-position:center
}

#mitem2:active {
    background-image:url(http://i.imgur.com/KQ07YMK.png);
    background-repeat:no-repeat;
    background-position:center
}

#mitem3 {
    position:absolute;
    background-image:url(http://i.imgur.com/UPERy0F.png);
    background-repeat:no-repeat;
    background-position:center;
    top:0;
    left:154px;
    width:90px;
    height:26px;
    z-index:8
}

#mitem3:hover {
    background-image:url(http://i.imgur.com/EqkUtsr.png);
    background-repeat:no-repeat;
    background-position:center
}

#mitem3:active {
    background-image:url(http://i.imgur.com/k54mb7V.png);
    background-repeat:no-repeat;
    background-position:center
}

#mitem4 {
    position:absolute;
    background-image:url(http://i.imgur.com/QHExEjQ.png);
    background-repeat:no-repeat;
    background-position:center;
    top:0;
    left:246px;
    width:75px;
    height:26px;
    z-index:8
}

#mitem4:hover {
    background-image:url(http://i.imgur.com/BjKCQbw.png);
    background-repeat:no-repeat;
    background-position:center
}

#mitem4:active {
    background-image:url(http://i.imgur.com/EVwDUoB.png);
    background-repeat:no-repeat;
    background-position:center
}

#mitem5 {
    position:absolute;
    background-image:url(http://i.imgur.com/oKrhDAE.png);
    background-repeat:no-repeat;
    background-position:center;
    top:0;
    left:323px;
    width:75px;
    height:26px;
    z-index:8
}

#mitem5:hover {
    background-image:url(http://i.imgur.com/gnLuhed.png);
    background-repeat:no-repeat;
    background-position:center
}

#mitem5:active {
    background-image:url(http://i.imgur.com/iqFh66v.png);
    background-repeat:no-repeat;
    background-position:center
}

#menuline {
    position:absolute;
    background-image:url(http://i.imgur.com/4xOPK1I.png);
    background-repeat:no-repeat;
    background-position:center;
    left:75px;
    top:0;
    width:2px;
    height:26px
}

#menuline2 {
    position:absolute;
    background-image:url(http://i.imgur.com/4xOPK1I.png);
    background-repeat:no-repeat;
    background-position:center;
    left:152px;
    top:0;
    width:2px;
    height:26px
}

#menuline3 {
    position:absolute;
    background-image:url(http://i.imgur.com/4xOPK1I.png);
    background-repeat:no-repeat;
    background-position:center;
    left:244px;
    top:0;
    width:2px;
    height:26px
}

#menuline4 {
    position:absolute;
    background-image:url(http://i.imgur.com/4xOPK1I.png);
    background-repeat:no-repeat;
    background-position:center;
    left:321px;
    top:0;
    width:2px;
    height:26px
}

<div class="topbox">
        <!-- Menu Items -->

        <div class="Menuitems">
            <a href="#">
            <div id="mitem1"></div></a> <a href="shows.html">
            <div id="mitem2"></div></a> <a href="codes.html">
            <div id="mitem3"></div></a> <a href="about.html">
            <div id="mitem4"></div></a> <a href="contact.html">
            <div id="mitem5"></div></a>

            <div id="menuline"></div>

            <div id="menuline2"></div>

            <div id="menuline3"></div>

            <div id="menuline4"></div>
        </div>
		<a href="#">
			<div class="divlogo"></div>
		</a>
    </div>

Answer 1

绝对定位使它脱离了页面流，并导致从自动边距居中不起作用。

.topbox {
    position:absolute;
    width:100%;
    z-index:11;
}
.Menuitems {
    margin: 120px auto;
    width:398px;
    height:26px;
    border-style: solid;
}

将正确定位菜单 div。摆脱菜单项上的所有绝对位置。

我制作了这个 Plunker，它可能就是您要找的东西。 http://plnkr.co/edit/wcRaJqvg0fsPT9HcBynf?p=preview