CSS per un menu di navigazione orizzontale sempre centrato

Problema: abbiamo un classico menu di navigazione orizzontale (lista non ordinata per il markup HTML + CSS) e vogliamo che appaia sempre centrato nel contesto dell'elemento che lo contiene.

La soluzione CSS parrebbe a portata di mano, non è affatto complicato centrare un elemento blocco in senso orizzontale:

div {
width: 500px;
margin: 0 auto;
}

Basta assegnare all'elemento una larghezza esplicita attraverso la proprietà width e impostare il valore auto per i margini sinistro e destro. È quanto abbiamo fatto nel nostro esempio di partenza. Ecco il codice CSS relativo al menu di navigazione:

ul#menu {
list-style: none;
margin:0 auto;
width: 400px;}
#menu li {float: left;}
#menu li a {
color: white;
font-weight: bold;
display:block;
line-height: 50px;
height: 40px;
width: 70px;
text-align: center;
text-decoration: none;
}
#menu li a:hover, #menu li a.active {
background-color: #F58529;
}

Le cose si complicano quando non conosciamo la larghezza dell'elemento, oppure quando non vogliamo o non possiamo impostarla nel nostro foglio di stile. Senza un valore esplicito per width non otteniamo il risultato desiderato. Possiamo verificarlo nel secondo esempio, di cui riportiamo la parte CSS rilevante:

ul#menu {
list-style: none;
margin:0 auto;
}
#menu li {float: left;}
[...]

Qualcuno potrebbe obiettare: ma se è necessario impostare una larghezza per centrare il menu, perché non farlo? Perché in certe situazioni non è la scelta ottimale. Se si aggiungono, per esempio, nuovi elementi al menu, bisognerà mettere mano al CSS per adeguare la larghezza. Per non parlare di fogli di stile legati a sistemi CMS. Si pensi al modo in cui in WordPress possiamo creare menu aggiungendo voci secondo le nostre esigenze. In quel caso, avere nel CSS una larghezza fissa si tradurrebbe in una perdita di flessibilità intollerabile. Sarebbe ridicolo ricordare a chi usa un certo tema "Attenzione a non superare la larghezza di 400px perché altrimenti il menu si sfascia!" oppure "Se il menu si sfascia vai a modificare la larghezza nel CSS"!

La soluzione, di semplice implementazione, c'è. È basata su una tecnica presentata sul suo blog da Harry Roberts. Vediamola nei dettagli partendo dal nostro terzo esempio.

Il menu è nuovamente centrato grazie a questo codice CSS:

ul#menu {
list-style: none;
margin:0;
padding:0;
text-align:center;
}
#menu li {display:inline;}
#menu li a {
color: white;
display:inline-block;
padding:10px;
font-weight: bold;
height: 40px;
line-height: 50px;
text-decoration: none;
}
#menu li a:hover, #menu li a.active {
background-color: #F58529;
}

I punti essenziali da osservare:

1. per l'elemento ul#menu non impostiamo una larghezza, non usiamo auto per i margini sinistro e destro, adoperiamo invece text-align:center;
2. per le singole voci del menu (gli elementi li) non usiamo i float, ma impostiamo il valore inline per la proprietà display;
3. per i link (#menu li a) associati alle voci del menu definiamo il valore inline-block per display, il resto è formattazione dell'aspetto visuale che possiamo personalizzare a nostro piacimento.

Come sottolinea Roberts, si sarebbe potuto semplificare ulteriormente il tutto assegnando display:inline-block; direttamente agli elementi li, ma IE7 non supporta display:inline-block sugli elementi blocco come i li. Una piccola aggiunta per garantire al massimo la compatibilità cross-browser, dunque.

Per dimostrare la bontà della soluzione, Roberts ha anche presentato una versione centrata di un menu dropdown perfettamente funzionante sui principali browser.

Conclusioni e approfondimenti

Ricapitolando, per ottenere un menu di navigazione orizzontale centrato anche senza impostare la larghezza dovremo:

1. assegnare text-align:center all'elemento ul;
2. usare display:inline sugli elementi li;
3. definire display:inline-block per i link (a) del menu.

Per approfondire il funzionamento delle proprietà e dei temi affrontati potete fare riferimento a queste risorse:

• Centrare orizzontalmente e verticalmente un div
• Tre proprietà speciali: display, float clear
• Visualizzare un elemento inline come blocco e viceversa

Tutti gli esempi sono disponibili per il download.