Wyśrodkowanie nawigacji w css/html

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>