Question

在将CSS菜单集中在页面中间时，我已尝试过所有内容。

您可以在www.eyewitnesssurveillance.com上看到CSS菜单

有人可以帮我把这个菜单放在页面上吗？谢谢！

以下是我正在使用的CSS代码：

.top-menu-wrap {
margin:     40px 0px 0 0px;
padding:    0;
z-index:    1;
position: relative;
margin: auto;


}

.top-menu-center {
position: center;
text-align: center;

}

.menu-toggle {
width:40px;
height:40px;
text-indent:-99999px;
cursor:pointer;
position:absolute;
opacity:1;
top:0px;
right:15px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease;

}

.menu-toggle:hover {
opacity:1;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease;
}

.menu-toggle-off {
background: url(../../images/menu/menu_toggle.png) 0 top;}

.menu-toggle-on {
background: url(../../images/menu/menu_toggle.png) 0 bottom;}

.homemenu { 
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
padding:        0;
margin:         0;
height:         85px;
background: url(../../images/gradients/white_to_fade.png) repeat-y right top;
overflow:hidden;


}

.homemenu a { color:#666; text-decoration:none;}

.homemenu ul li {
background:#fff;
background: rgba(255,255,255,0.7);
overflow:hidden;
}

Answer 1

你可以做几件事来集中精力。如果您可以使用静态宽度，则可以执行以下操作：

.homemenu { width: 960px; margin: 0 auto; }

您还可以在菜单周围放置一个包装器div，其中css样式为：

.homemenu-wrapper { text-align: center; }

您可能想要调查的另一个选项是使用一些很好的脚手架/网格，就像在Twitter Bootstrap中找到的那样。我鼓励你看看它或类似的东西，这对于定位事物非常有帮助。

Answer 2

如果你包含你的HTML或者可以为它提供任何小提琴，那么它会更有帮助。除此之外，你可以使用这种类型的外部div来进行操作。

<div class="main-container">
<div class="container">
<!-- your menu code-->
</div>
</div>

/*css*/
.container{ width:1000px; margin:0 auto;}

居中我的CSS菜单

2 个答案: