CSS/HTML 菜单似乎无法居中 header

Question

我需要帮助将菜单居中 CSS...如果我能得到一些帮助那就太好了！我已经尝试了很多方法，但基本上不管怎样它都会向左浮动。如果我添加 right: 50% 和 left 50% 它居中但是页面右侧有白色 space 。 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>

    #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;
    }

    <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>

Answer 1

这是居中菜单的示例：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 是 "reset" 那么你就不必指定 margin:0； padding:0;在您的 css 或担心浏览器固有的样式。

Answer 2

这个怎么样？

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 3

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

更改为：

display:inline-block;

并从所有位置移除左浮动。

CSS/HTML 菜单似乎无法居中 header

CSS/HTML can't seem to center menu header

html

css

header

center

dreamweaver