以菜单为中心
我不明白为什么我的菜单不集中。 我尝试了从内联元素到页边距的所有内容：0 auto; 调整=“中心”，我不能让菜单居中。 你可以在http://jeremyspence.net78.net看到它，你必须向下滚动才能看到它，只有当它通过主菜单时才会出现。 这是一些CSS
.scrollmenu {
display:none;
position: fixed;
top: 0;
text-align:center;
margin: 0px auto;
width: 1020px;
z-index: 10000;
padding:0;
}
.scrollmenu li{
width: 200px;
height: 75px;
overflow: hidden;
position: relative;
float:left;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-right: 4px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.scrollmenu li:last-child{
margin-right: 0px;
}
.scrollmenu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #000;
position: relative;
}
.scroll-icon{
font-family: 'Symbols';
font-size: 60px;
color: #333;
text-shadow: 0px 0px 1px #333;
line-height: 80px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
}
.scroll-home{
font-size: 30px;
opacity: 0.8;
text-align: center;
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 30%;
}
.scrollmenu li:nth-child(2):hover{
background-color: #CEFECE;
}
.scrollmenu li:nth-child(3):hover{
background-color: #CEFEFE;
}
.scrollmenu li:nth-child(4):hover{
background-color: #CECEFE;
}
.scrollmenu li:last-child:hover{
background-color: #FECEFE;
}
只需在<ul class="scrollmenu"></ul> ：
left: 50%;
margin-left: -510px;
要么 ：
left: 0;
right: 0;
看起来你正在集中一个div？ 默认情况下， <div>是一个块元素。 他们以利润率为中心。 你很近 - 你需要使左右边距自动调整。 margin-left:auto;margin-right:auto; 。 这将把它放在它的父元素中，它的宽度必须是100％（块元素默认会扩展到父元素的最大宽度）。 如果它是内联元素，则可以使用text-align:center; 在它的父母（父母仍然需要100％宽度），这将做的伎俩。
在你的链接的HTML中，看起来你需要设置position:fixed在ul菜单上方的div 。 看起来你正在设置两个position:fixed并尝试同时居中。 获取位于固定位置的父分区，然后其子ul应该能够通过margin-left: auto; margin-right: auto;进行居中margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; 。
上一篇: centering a menu