Jak wyśrodkować menu w HTML?

Aby wyśrodkować menu w HTML, najczęściej używa się stylów CSS, które pozwalają elegancko dostosować położenie elementów zarówno w poziomie, jak i w pionie. Poniżej znajdziesz szczegółowy poradnik obejmujący różne metody centrowania menu – klasycznego (horyzontalnego), pionowego oraz responsywnego wraz z wyjaśnieniami i przykładami gotowymi do wykorzystania na stronie internetowej.

Struktura HTML przykładowego menu

Zazwyczaj menu w HTML prezentuje się w następujący sposób:

<nav>
  <ul class="menu">
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">O nas</a></li>
    <li><a href="#">Oferta</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

Centrowanie menu poziomego (horyzontalnego)

Metoda text-align: center

Najprostsza metoda stosowana dla menu znajdującego się w elemencie blokowym, takim jak <nav> lub <div>. W tym przypadku menu to lista (ul), a elementy listy (li) wyświetlamy liniowo.

Przykład CSS:

nav { text-align: center; }
.menu { display: inline-block; padding: 0; margin: 0; list-style: none; }
.menu li { display: inline-block; margin: 0 10px; }

Wyjaśnienie –

• text-align: center; – wyrównuje zawartość poziomo;
• display: inline-block; dla .menu – sprawia, że cała lista jest traktowana jako jeden blok, dzięki czemu może być wyśrodkowana;
• display: inline-block; dla li – ustawia elementy obok siebie.

Centrowanie z użyciem flexbox

Flexbox jest nowoczesną techniką CSS, bardzo wygodną przy tworzeniu elastycznych layoutów.

Przykład CSS:

nav {
  display: flex;
  justify-content: center; /* wyśrodkowanie poziome */
}
.menu {
  display: flex;
  gap: 20px; /* odstęp między elementami menu */
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu li {
  /* domyślnie flex rozkłada elementy w jednej linii */
}

Wyjaśnienie –

• display: flex; justify-content: center; na wrapperze – powoduje wyśrodkowanie zawartości menu;
• gap – ułatwia zarządzanie odstępami pomiędzy pozycjami menu.

Centrowanie menu pionowego

Menu pionowe zazwyczaj wyśrodkowuje się na stronie lub wewnątrz określonego kontenera – najczęściej zarówno horyzontalnie, jak i wertykalnie. Oto przykład z wykorzystaniem Flexboxa:

Przykład CSS:

.container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* wyśrodkowanie w pionie */
  align-items: center; /* wyśrodkowanie w poziomie */
  height: 100vh; /* wysokość całej strony */
}
.menu {
  list-style: none;
  padding: 0;
}
.menu li {
  margin: 10px 0;
}

Fragment HTML –

<div class="container">
  <ul class="menu">
    <li><a href="#">Opcja 1</a></li>
    <li><a href="#">Opcja 2</a></li>
    <li><a href="#">Opcja 3</a></li>
  </ul>
</div>

Centrowanie menu responsywnego

Dla menu, które ma być poprawnie wycentrowane zarówno na komputerach, jak i na urządzeniach mobilnych, najlepiej wykorzystać Flexbox w połączeniu z media queries.

Przykład CSS:

nav {
  display: flex;
  justify-content: center;
}

.menu {
  display: flex;
  gap: 15px;
  list-style: none;
  padding: 0;
}

@media (max-width: 600px) {
  nav, .menu {
    flex-direction: column;
    align-items: center;
  }
  .menu li {
    margin: 10px 0;
  }
}

Wyjaśnienie –

• Na szerokich ekranach menu jest w jednej linii i wyśrodkowane,
• na wąskich ekranach menu układa się w kolumnę i pozostaje wyśrodkowane.

Centrowanie menu z wykorzystaniem wartości margin

W niektórych przypadkach do centrowania menu sprawdza się technika margin: 0 auto; (jeśli ul.menu ma ustaloną szerokość):

.menu {
  width: 400px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.menu li {
  display: inline;
  margin: 0 10px;
}

Dodatkowe wskazówki

• Nie stosuj stylów takich jak background lub border bezpośrednio na ul, jeśli używasz text-align: center; – nadawaj style li, aby uniknąć nieoczekiwanych przesunięć menu;
• Możesz dodawać klasy specjalnie dla wybranych pozycji, np. .active – by łatwo je stylować;
• Dla przejrzystości i łatwości rozbudowy zawsze oddzielaj warstwę strukturalną (HTML) od stylów (CSS).

Przykładowe, kompletne menu do skopiowania

<nav>
  <ul class="menu">
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">O nas</a></li>
    <li><a href="#">Oferta</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

nav {
  text-align: center;
}
.menu {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu li {
  display: inline-block;
  margin: 0 20px;
}
.menu a {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background 0.3s;
}
.menu a:hover {
  background: #f0f0f0;
}

Każda z opisanych metod nadaje się zarówno do prostych stron, jak i bardziej rozbudowanych serwisów – dobierz rozwiązanie dopasowane do swoich potrzeb i stylu budowy strony. Stosuj flexboxa dla największej elastyczności i responsywności!