[CSS]Wyśrodkowanie odnośników w menu

Witam, mam pytanie, próbowałem wczoraj z 2 godz szukać na to odpowiedzi, lecz nic nie skutkowało jak wyśrodkować takie menu, dałem link do obrazka, bo jak wstawię w to niepotrzebnie się przez to forum rozchodzi w bok:
http://img687.imageshack.us/img687/6712/screengfv.jpg
Bo po prostu nie chciałbym by te linki były po lewej, tylko na środku strony.
Poniżej kod style.css oraz index.html

//style.css

ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:12px;
text-align: center;
background:url('../img/bg.png') repeat-x top center;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:2px solid #000;
margin:0;
padding:2;
}

ul.menu li {
display:block;
float:left;
text-align: center;
margin:0;
padding:0;
}

ul.menu li a {
float:left;
color:#fff;
text-decoration:none;
text-align: center;
height:24px;
padding:9px 15px 0;
font-weight:normal;
}

ul.menu li a:hover,.current {
color:#FDFF7D;
text-align: center;
background:url('../img/bg.png') repeat-x top center;
text-decoration:none;
}

/*ul.menu .current a {
color:#fff;
font-weight:700;
text-align: center;
}*/


/*RED*/
ul.menu.red{
background-color:#DE3330;
}
ul.menu.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}


//index.html
<link rel="stylesheet" type="text/css" href="style.css" />
<ul class="menu red">
  <li class="current"><a href="link#" target="_self">Strona glowna</a></li>
  <li><a href="link#" target="_self">Rejestracja</a></li>
  <li><a href="link#" target="_self">O nas</a></li>
  <li><a href="link#" target="_self">Mapa strony</a></li>
  <li><a href="link#" target="_self">Kontakt</a></li>
</ul>

Prosta metoda to zrezygnowanie z floatów. Daj elementom li display: inline i upewnij się, że zawarte w nich łącza też mają inline (jest tak domyślnie, więc po prostu nie możesz tam mieć np. display: block). Następnie zawierającej to wszystko liście daj text-align: center.

To wszystko sprawi, że elementy listy będą generowały ramki wierszowe. Niestety, stwarza to pewne problemy gdy trzeba je ostylować. Np. ich dopełnienia i marginesy pionowe przestaną wpływać na wysokość menu (poziome wciąż będą działały jak należy). Kłopotliwe może być też pozycjonowanie tła na takich elementach.

Ale spróbuj, może w Twoim wypadku da się to jakoś rozsądnie zrobić.

Wiem, że to niemodne rozwiązanie, ale na pewno działające. Może zamiast listy zastosuj tabelkę?
Ewentualnie możesz dać margin:0px auto; elementowi UL , ale wtedy musisz ustawić mu stałą szerokość (albo w stylach, albo poprzez javascript).

leadersmind napisał(a)

Ewentualnie możesz dać margin:0px auto; elementowi UL , ale wtedy musisz ustawić mu stałą szerokość (albo w stylach, albo poprzez javascript).

Tyle że jeśli liście dasz stałą szerokość, a jej elementom o zmiennej szerokości float: left, to całość będzie wyglądała na przesuniętą w lewo, a nie wyśrodkowaną.

Jest na to skuteczna metoda i czasem ją stosuję, ale jest dość skomplikowana i wymaga wprowadzenia dodatkowego elementu do menu (a tego unikam). Z tego co widzę, jest to nieźle wytłumaczone tutaj: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

bswierczynski napisał(a)

leadersmind napisał(a)

Ewentualnie możesz dać margin:0px auto; elementowi UL , ale wtedy musisz ustawić mu stałą szerokość (albo w stylach, albo poprzez javascript).

Tyle że jeśli liście dasz stałą szerokość, a jej elementom o zmiennej szerokości float: left, to całość będzie wyglądała na przesuniętą w lewo, a nie wyśrodkowaną.

No niestety, ale muszą mieć wtedy stałą szerokość i text-align:center;