Jak wyśrodkować w poziomie moje menu nawigacyjne?

Question

Utworzyłem listę:

    <ul>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
    </ul>

 

Następnie włączyłem pływanie elementów list i ustawiłem odsyłacz jako element blokowy

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  background-color: blue;
  color: black;
  text-decoration: none;
  text-align: center;
  width: 200px;
  padding: 50px;
}

 

Domyślnie wszystkie 3 pokazują się jeden obok drugiego, przylegając do lewej krawędzi okna przeglądarki. Chciałbym by wszystkie 3 ustawiły się na środku. Próbowałem użyć margin-left oraz margin-right ale bez efektu.

Answer 1

Polecam zapomnieć na zawsze o floatach i używać flexboxa:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Życie stanie się o wiele prostsze.

A kod napisałbym tak:

ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center
  }
   
  ul li a {
    display: block;
    background-color: blue;
    color: black;
    text-decoration: none;
    text-align: center;
    width: 200px;
    padding: 50px
  }  

 

Comments

Float jest czasami przydatny, np. gdy chcesz, aby tekst opływał obrazek. Ale rzeczywiście, do konstruowania interfejsu już przestarzałe.

Answer 2

W tym przypadku ustaw ul jako inlin-block i wstaw go w kontener o pełnej szerokości okna i dodaj text-align: center; dla kontenera. Dodatkowo przy float wypadało by użyć clearfix.

Taka sztuczka na wycentrowanie, ale to taka ciekawostka, bo nie ma sensu tak kombinować, gdy jest flexbox.