Poziome menu zawsze wyśrodkowane

Nie jednemu koderowi taka możliwość jest bardzo często potrzebna. Pytanie, jak wyśrodkować menu poziome w <ul> kiedy wszystko mamy wyfloatowane? Mam na to bardzo prosty sposób.

SPOSÓB 1

Potrzebne nam będą dwa elementy:

  • kontener – ja osobiście używam <nav>
  • lista menu – <ul>

Kod HTML

<nav>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">O firmie</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Kontakt</a></li>
 </ul>
</nav>

CSS

nav {float: left; width: 100%; text-align: center;}
nav ul {display:inline-block;}
nav ul li {float: left; text-align: center;}

 

Krótkie wyjaśnienie:

<nav> jest elementem blokowym, dostał float oraz szerokość – w moim przypadku 100% czyli całą szerokość ekranu. Dodajemy również text-align: center, czyli wyśrodkowanie tekstu w bloku aby menu, które w nim się znajduje ustawiło się na środku.

<ul> nadajemy display: inline-block, aby był interpretowany jako element liniowo-blokowy.

<li> nadajemy float: left aby elementy <li> poukładały się obok siebie

 

DEMO | GITHUB

Może Ci się również spodoba

Dodaj komentarz

Twój adres email nie zostanie opublikowany.