CSS / HTML nie wydaje się wyśrodkowywać nagłówka menu - html, css, header, center, dreamweaver

Potrzebuję pomocy w centrowaniu menu w CSS ...gdybym mógł uzyskać pomoc, byłoby wspaniale! Próbowałem wielu metod, ale po prostu płynie w lewo bez względu na to, co w zasadzie. Jeśli dodam prawo: 50% i pozostawię 50% to wyśrodkuje, ale po prawej stronie strony jest biała przestrzeń. CSS jest naprawdę chaotyczny, ponieważ próbowałem bawić się ustawieniami, aby wyśrodkować ..

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

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

Odpowiedzi:

Po prostu zrób to:
http://jsfiddle.net/bthb0y7g/1/

<li> zmienia się na:

display:inline-block;

i usuń lewe pływaki zewsząd.

Co powiesz na to?

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 */
}

Skrzypce

Możesz nawet nadać mu stylowy, prosty motyw to?

Oto przykład wyśrodkowanego menu: http://jsfiddle.net/24fwb5uv/6/ Powinien być dla ciebie odpowiedni. Ważnymi stylizacjami są ul, które zajmują całą szerokość, z tekstem w środku wyrównanym do środka. Elementy LI powinny być wyświetlane inline, a linki powinny być również wyświetlane w linii. Zauważ, że to utrudnia sprawę, jeśli chcesz przenosić rzeczy w dowolne miejsce, ale jest to sposób na uzyskanie wyśrodkowanego menu, jeśli nie jesteś zbyt wybredny. Oto odpowiedni kod:

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

Widzę, że masz opakowanie wokół swojego menu, jabyłby ostrożny, aby opakowanie zajmowało całą szerokość, aby ul zajmował całą szerokość. Upewnij się, że css jest „resetowany”, wtedy nie będziesz musiał określać marginesu: 0; dopełnienie: 0; w swoim css lub martw się o style właściwe dla przeglądarek.