Menu zjeżdża na prawo

Question

Chciałem wyśrodkować menu poprzez maring-left auto margin-right auto ale zjeżdza troche na prawo to kod:

body {
  margin: 0;
  background-color:black;
}
ul {
  width: 100%;
  float: down;
  list-style:none;
  font-family: 'Anton', sans-serif;
}

li a{
  float: down;
  display:block;
  width: 20%;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
  color: white;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color:blue;
  margin-left:auto;
  margin-right:auto;
}

li:nth-child(1) a {
  background-image: url("img/menu1.png");
  background-size:100% 100%;
  background-repeat: no-repeat;
}

li:nth-child(2) a {
  background-image: url("img/menu2.png");
  background-size:100% 100%;
  background-repeat: no-repeat;
}

Przy okazji jak zrobić aby to menu było na środku ale tak centralnie na środku? 

Answer 1

Najprościej wstaw menu w pojemnik i potraktuj ul jako element inline-block; Wycentrujesz je wtedy za pomocą text-align; center; Pamiętaj o domyślnych margin i padding dla ul.

<nav>
	<ul>
		<li><a href="">link</a></li>
		<li><a href="">link</a></li>
		<li><a href="">link</a></li>
		<li><a href="">link</a></li>
	</ul>
</nav>

*{
		border: 1px solid red;
}
nav{
	width: 100%;
	text-align: center;
}	
	
ul{
	display: inline-block;
	width: 20%;
	padding: 0;
	margin: 0;
}
li{
	list-style: none;
}

Ale to nie jedyny sposób. Centrowanie css

Comments

tyle że ja chce użyć obrazków jako guziki menu. Bez obrazków wcześniej się nie rozjeżdżało

---

No i w czym problem? Wstaw obrazki zamiast tekstu.

Answer 2

Nie ma takiej wartości jak down dla własności float.

Comments

usunąłem to ale dalej zjeżdża na prawo :/