我不明白为什么我的菜单没有居中。我尝试了从内联元素到边距的所有内容: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;
}
答案 0 :(得分:3)
只需在<ul class="scrollmenu"></ul>
上添加此内容:
left: 50%;
margin-left: -510px;
或:
left: 0;
right: 0;
答案 1 :(得分:1)
看起来你正在以div为中心?默认情况下,<div>
是一个块元素。他们以利润为中心。你很接近 - 你需要自动左边和右边距。 margin-left:auto;margin-right:auto;
。这将把它放在它的父元素中,它必须是100%宽度(默认情况下块元素将扩展到父元素的最大宽度)。如果它是一个内联元素,你可以在它的父元素上使用text-align:center;
(父元素仍需要100%宽度),这样就可以了。
答案 2 :(得分:1)
在您的链接的HTML中,您似乎需要在position:fixed
菜单上方的div
中设置ul
。看起来您正在设置position:fixed
并尝试同时居中。将父div放置在固定位置,然后其子ul
应该能够通过margin-left: auto; margin-right: auto;
居中。
答案 3 :(得分:1)
您是否尝试过为内容div添加宽度?
.content {
position: relative;
width: 1024px;
margin: 0 auto;
}
这似乎解决了Chrome中的问题。
通过设置position: fixed;
没有封闭容器的大小,菜单使用容器的窗口边框,然后将所有项目向左浮动......好吧它们都在左边。