Mettere un elenco al centro di un div

**Federix** · 04-07-2007, 11:21

Ho un div largo 760px contenente al suo interno il menu principale del sito realizzato come un elenco:

codice:

<div id="menu">
<ul>[*]<%=menu_chisiamo%>[*]<%=menu_lavorazione%>[/list]
</div>

il cui stile CSS è il seguente:

codice:

#menu { margin:auto; width:760px; height:35px; clear:both; }
#menu li { padding:10px; color:#96542C; list-style-type:none; float:left; }

Ecco, io vorrei che questo elenco stesse al centro del livello ma non riesco con niente. Ho provato con il margin:auto; ma niente, con il text-align:center; ma niente, l'unico metodo è con il padding, ma quando varia una voce del menu devo ricreare tutte le misure.
Come potrei risolvere???

**Mich_** · 04-07-2007, 11:30

Dipende da cosa contiene il[*]: se sono blocchi o se sono testi.
Nel primo caso devi usare:
#menu li * { margin: 0 auto; }
Nel secondo:
#menu li {text-align: center; }

PERO`
Ambedue funzionano se i blocchi estrerni sono tutti larghi a sufficienza.
Quindi, quello che ti manca e`:
#menu li { width: 100%; }

NOTA: quanto sopra vale per i browser standard. Per IE occorre apportare delle modifiche

**Federix** · 04-07-2007, 11:36

Forse ho intepretato male io il tuo consiglio, o forse tu hai capito male la mia richiesta, quello che voglio fare io è mettere tutto l'elenco al centro del livello, non il testo al centro della singola riga del menu.

**Mich_** · 04-07-2007, 11:48

Allora non ci capiamo.

Con i CSS si trattano solo rettangoli.

E tanto per capirci, faccimo una cosa brutta, ma che ci puo` aiutare a sistemare i blocchi (io lo faccio sempre quando non capisco qualcosa):

codice:

#menu { 
  margin:auto;
  width:760px;
  height:35px;
  clear:both; 
  background: red;
}
#menu li { 
  padding:10px;
  color:#96542C;
  list-style-type:none;
  float:left;
  background: green;
}

Tu vuoi centrare:
a) il rosso dentro il resto della pagina,
b) il verde dentro il rosso o
c) il testo dentro il verde?

Se la richiesta e` la a) occorre notare che il blocco e` gia` piuttosto largo, e che ci sono gia` i margini automatici per la centratura nei browser standard.
Potrebbe mancare:
html, body {
width: 100%;
}
che va replicato anche in tutti gli eventuali blocchi intermedi tra il <body> e il tuo <div id="menu">

**Federix** · 04-07-2007, 12:06

Forse hai ragione tu, mi sono spiegato male.
Io devo allineare il tag <ul>, contenuto dentro il <div id="menu"> al centro del livello menu, in modo da avere le voci dell'elenco posizionate al centro del livello menu.

codice:

<div id="menu">
<ul> [*][/list]
</div>

Spero di essere stato più chiaro e preciso, più o meno come se le voci del green stessero al centro del red.

**Mich_** · 04-07-2007, 12:21

Quindi devi dare margin: 0 auto; al tag ul:

codice:

#menu ul {
  margin: 0 auto;
  width: ...;
}

In linea di massima occorre definire una larghezza, affinche` il tag <ul> possa venir centrato.
La larghezza puo` essere definita anche in em, in modo che sia proporzionale al carattere usato.

PS: per IE devi dare text-align: center; al #menu, e ripristinare text-align: left; a #menu ul

Discussione: Mettere un elenco al centro di un div

Strumenti discussione

Ricerca discussione

Visualizza

Mettere un elenco al centro di un div

Permessi di invio