(Vorab sei bemerkt, dass die nachfolgende Methode auf
Stu Nicholls | CSSplay | Centering Floats basiert, aber dennoch anders ist - Dank geht dabei auch an
fricca )
Diese Variante nutzt die display: table-Eigenschaften, damit
#navi auf die Breite zusammenschrumpft, die die enthaltenen Links erfordern, so dass
#navi anschließend per margin: 0 auto; horizontal zentriert werden kann.
Ein
Bug im Firefox erzwingt bei dieser Variante ein zusätzliches div, denn wie auf der verlinkten Seite beschrieben, kann es dem angedachten CSS-Konstrukt widerfahren, dass der Firefox die li-Elemente zweizeilig anordnet, und um dies zu verhindern, muss eine "echte" Tabellen
zeile her, die die Darstellung der li-Elemente in
einer Reihe erzwingt. Diesen wird im Zuge dessen auch das float genommen und durch display: table-cell; ersetzt, um eine saubere CSS-Tabelle zu bekommen. Das geänderte Markup sieht folgendermaßen aus:
[...]