search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS] Wyśrodkowanie menu za pomocą CSS

[CSS] Wyśrodkowanie menu za pomocą CSS

W dzisiejszym tutorialu poruszam problem wyśrodkowywania menu za pomocą CSS. Do tej pory wielu ludzi ma z tym problemy i próbuje robić menu z wykorzystaniem marginesów czy paddingów, a to nie jest dobry sposób jeśli chcemy mieć menu z dynamicznie ustalaną szerokością zależną od długości przycisków czy napisów w linkach w menu.

Na początek stwórzmy sobie przykładową strukturę menu. W moim przypadku wygląda następująco:

<div id="menu">
<ul>
<li><a href="#">Przycisk 1</a></li>
<li><a href="#">Przycisk 2</a></li>
<li><a href="#">Przycisk 3</a></li>
<li><a href="#" class="zaznaczony">Przycisk 4</a></li>
</ul>
</div>

Następnie trzeba stworzyć plik CSS, który będzie zawierał poniższy kod:

#menu {
   float: left;
   width: 100%;
   background: #fff;
   border-bottom: 4px solid #000;
   overflow: hidden;
   position: relative;
}
#menu ul {
   clear: left;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   left: 50%;
   text-align: center;
}
#menu ul li {
   display: block;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   right: 50%;
}
#menu ul li a {
   display: block;
   margin: 0 0 0 1px;
   padding: 3px 10px;
   background: #ddd;
   color: #000;
   text-decoration: none;
   line-height: 20px;
}
#menu ul li a:hover {
   background: #b00;
   color: #fff;
}
#menu ul li a.zaznaczony, #menu ul li a.zaznaczony:hover {
   color: #fff;
   background: #000;
   font-weight: bold;
}

Aby stworzyć efekt wyśrodkowania menu użyłem pozycjonowania relatywnego dla ul w którym jest zawarte menu i ustawiłem jego pozycję na 50% z lewej strony i wzmocniłem ustawiając text-align: center.
Ponadto, dla każdego elementu listy menu dałem pozycjonowanie relatywne ustawiając pozycję na 50% z prawej strony i display: block.

Tworząc tego typu wyśrodkowane menu należy pamiętać o kilku rzeczach:

  • Nie możesz dać żadnych wizualnych styli do elementu ul takich jak: background czy border. Musisz te atrybuty dać dla elementów listy li.
  • Jeśli chcesz stworzyć osobny styl dla którejś pozycji w menu, to dodaj klasę do tego przycisku. Dzięki temu unikniesz dziwnego wysypania się menu.

Budując w ten sposób menu dostajesz menu w pełni zgodne ze standardami, bez żadnych hacków dla innych przeglądarek oraz dodatkowego kodu JavaScript.

Demo z tego artykułu jest dostępne tutaj: wyśrodkowane menu CSS

  • czemu dopiero teraz tu trafilem 🙁 tyle zabawy z marginesami dla centrowania :/ dobry pomysl, dziekuje ze sie podzieliles tym hackiem. pozdrawiam

  • Maciej

    Piękne, dzięki wielkie za podzielenie się metodą 😀

  • Piotrek

    Albo mi się zdaje, albo kod można skrócić o atrybuty:
    text-align: center; przy #menu ul
    display: block; przy #menu ul li

    Jeśli się mylę to mnie popraw i wytłumacz dlaczego należy je zostawić.

    Pozdrawiam.

  • display: block pomaga przy zwiększeniu obszaru klikalności linka. Dzięki temu nie trzeba najeżdżać na tekst linka, aby w niego kliknąć.

  • Piotrek

    Dziękuję za szybką odpowiedź.

  • Witam.
    Chciałbym Panu bardzo podziękować za ten prosty przykład. Sprawdził się przy przystosowywaniu istniejącego menu, nie mogłem sobie poradzić, dopiero się uczę CSS.

    Jeszcze raz dziękuję.

  • dave

    ogólnie fajnie ale jak już chcesz zastosować menu rozwijane to są problemy overflow:hidden; ukryje to co jest po za i kilka innych motywów

  • Marcin

    Witam Piotr potrzebuje pilnie pomocy, wiesz może jak w wordpressie a dokładnie w popularnym motywie graphene wyśrodkować i zarazem wyjustować przyciski w górnym menu tak by byly one rownomiernie na calej dlugosci paska?

  • Niestety, nie znam tego szablonu. Do tej pory nie potrzebowałem korzystać z innych projektów (poza jednym dawno temu). Musiałbym widzieć jakąś implementację tego szablonu na żywo. Wtedy może byłbym w stanie pomóc.