Wyśrodkowanie nawigacji w css/html

Question

Hej. Mam bardzo banalny, a jednak trudny problem, z którym męczę się już dobrych kilku godzin (pewnie rozwiązanie mam gdzieś pod nosem, ale go nie dostrzegam u_u). Mianowicie, jak wyśrodkować tę o to uroczą nawigację? http://i.imgur.com/Fkwzimn.png

---

.navi ul, .navi li {
	margin: 0;
	padding: 0;

}
.navi ul {
	background: gray;
	list-style: none;
	width: 100%;
}
.navi li {
	float: left;
	position: relative;
	width: auto;
}
.navi a {
	background: green;
	color: #FFFFFF;
	display: block;
	font: bold 12px/20px sans-serif;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.navi li:hover a {
	background: #000000;
}

<header>
					Logo i menu główne
										
										<nav class="navi" role="navigation">
  <ul>
    <li><a href="">Strona główna</a></li>
    <li><a href="">Kontakt</a></li>
    <li><a href="#">Artykuły</a>
      <ul id="submenu">
        <li><a href="">Difference between SVG vs. Canvas</a></li>
        <li><a href="">New features in HTML5</a></li>
        <li><a href="">Creating links to sections within a webpage</a></li>
      </ul>
    </li>
    <li><a href="">Newsy</a></li>
    <li><a href="">Info</a></li>
  </ul>
</nav>
</header>

Comments

Witam. To co widac na screenie to nie to samo co wynika z kodu. Daj caly kod.

---

Daj

.navi{
text-align: center;
}

dalej

.navi ul {
     display: inline-block;
}

usuń z tej klasy width: 100%; Bo jak ma się wycentrować skoro jest na całą szerokość strony ?.

---

.navi ul, .navi li {
	margin: 0;
	padding: 0;

}
.navi ul {
	background: gray;
	list-style: none;
	width: 100%;
}
.navi li {
	float: left;
	position: relative;
	width: auto;
}
.navi a {
	background: green;
	color: #FFFFFF;
	display: block;
	font: bold 12px/20px sans-serif;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.navi li:hover a {
	background: #000000;
}
 #submenu {
	left: 0;
	opacity: 0;
	position: absolute;
	top: 35px;
	visibility: hidden;
	z-index: 1;
}
li:hover ul#submenu {
	opacity: 1;
	top: 40px;
	visibility: visible;
}
#submenu li {
	float: none;
	width: 100%;
}
#submenu a:hover {
	background: #DF4B05;
}
#submenu a {
	background-color:#000000;
}

proszę bardzo. Interesuje mnie tylko jak to wyśrodkować 

---

O, jest na środku ^^ Dziękuję.

---

Fajnie. Zamknij temat.