CSS / HTML не може да изглежда заглавката на централното меню - html, css, заглавие, център, мечтател

Имам нужда от помощ при центриране на менюто на 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>

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

Отговори:

Просто го направете:
http://jsfiddle.net/bthb0y7g/1/

<li> промени в:

display:inline-block;

и премахнете левите плувки отвсякъде.

Какво ще кажете за това?

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

цигулка

Можете дори да го оформите с хубава проста тема като това?

Ето пример за центрирано меню: 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;
}

Виждам, че имаш обвивка около менюто си, азби било внимателно обвивката да поеме пълна ширина, за да позволи на ул. да поеме пълна ширина. Уверете се, че css е "нулиран", тогава няма да трябва да посочвате марж: 0; padding: 0; във вашия css или се притеснявайте за стилове, присъщи на браузърите.