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

Answer 2

块级元素是贪婪的。他们使用边距来占据他们所处的整个水平空间，以便不与它们内联。如果您在左右两侧都设置了自动，则双方都需要所有空间，因此它们共享 - 产生一个居中的对象。

如果在块级元素上使用position：absolute或fixed，则会从元素中删除此贪婪行为。

Answer 3

将.Menuitems的位置更改为relative，这样可以解决问题。

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

3 个答案: