Question

我需要帮助将菜单集中在CSS上......如果我能得到一些帮助就会很棒！我已经尝试了很多方法，但它只是漂浮在左边，无论基本上是什么。如果我添加正确：50％并保留50％它居中但是页面右侧有空白区域。 CSS非常混乱，因为我尝试搞乱设置以使其居中..

这是CSS

#cssmenu,
#cssmenu ul li a,
#menu-button {
height: auto;
margin: 0px;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: auto;
}
#cssmenu ul {
clear:left;
float:left;
margin:0;
padding:0;
position:relative;
text-align:center;  
}
#cssmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
text-align:center;
}
#cssmenu #menu-button {
display: none;
text-align: center;
width: auto;
}
#cssmenu {
font-family: 'Oswald', sans-serif;
border-bottom: 2px solid rgba(0,0,0,.2); *Opacity*
line-height: 1;
padding: 0;
text-align: center;
opacity: 1;
position: relative;
background-color: #00a5d4;
}

这是HTML

<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
</ul>
</div>

＆＃13;

    #cssmenu,
    #cssmenu ul li a,
    #menu-button {
	height: auto;
	margin: 0px;
	text-align: center;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	border: 0;
	list-style: none;
	line-height: 1;
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: auto;
    }
    #cssmenu ul {
    clear:left;
    float:left;
    margin:0;
    padding:0;
    position:relative;
    text-align:center;	
    }
    #cssmenu ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    }
    #cssmenu:after,
    #cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    text-align:center;
    }
    #cssmenu #menu-button {
	display: none;
	text-align: center;
	width: auto;
    }
    #cssmenu {
	font-family: 'Oswald', sans-serif;
	border-bottom: 2px solid rgba(0,0,0,.2); *Opacity*
	line-height: 1;
	padding: 0;
	text-align: center;
	opacity: 1;
	position: relative;
	background-color: #00a5d4;
    }

＆＃13;

    <div id='cssmenu'>
    <ul>
    <li class='active'><a href='#'>Home</a></li>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Home</a></li>
    </ul>
    </div>

＆＃13;

Answer 1

这个怎么样？

<强> HTML

<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">CAPABILITIES</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">RFQ</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>

<强> CSS

#nav {
text-align:center;
}
#nav li {
display:inline;
}
#nav a {
text-decoration:none; 
padding:0 30px; /* variable width */
}

Fiddle

您甚至可以使用像this这样简单的简单主题来设置样式吗？

Answer 2

以下是居中菜单的示例：http://jsfiddle.net/24fwb5uv/6/ 它应该与你相关。重要的样式是一个占据全宽的ul，其中的文本与中心对齐。 LI元素应以内联方式显示，链接也应以内联方式显示。请注意，如果你想把东西放在任何地方，这确实会让事情变得更难，但如果你对某些事情不太挑剔，这是一种获得中心菜单的方法。以下是相关代码：

<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
</ul>

ul {
    display:block;
    text-align:center;
    width:100%;
    margin:0;
    padding:0;
}

li {
    display:inline;
    margin:0;
    padding:0;
}

a {
    display:inline;
}

我看到你的菜单周围有一个包装器，我会小心包装器占据全宽，让ul占据全宽。确保css是＆＃34;重置＆＃34;然后你不必指定保证金：0;填充：0;在您的CSS中或担心浏览器固有的样式。

Answer 3

这样做：
http://jsfiddle.net/bthb0y7g/1/

＆LT; li>更改为：

display:inline-block;

并从任何地方移除左浮动。

CSS / HTML似乎无法居中菜单标题

3 个答案: