Centrare una lista con elementi inline

[loHacker]

Ciao a tutti, non mi intendo molto di CSS, sto cercando di creare una galleria fotografica con le anteprime delle foto che si dispongono in una lista come se fossero in una tabella, così il numero di anteprime per riga si adatta alla larghezza della pagina.

Per ora ho hatto questo ma non so come centrarle (sono allineate a sinistra):


Questi sono i CSS completi, #gallery contiene tutto il resto e devo centrare la lista al suo interno:

#gallery {
	min-height: 400px;
}

#gallery ul {
	width: 100%;
}

#gallery ul li {
	text-align: center;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 150px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

#gallery ul li div.unpublished {
	background-color: red;
}

#gallery ul li div.head {
	text-align: right;
}

#gallery ul li div.head a {
	width: 0;
	display: inline;
}

#gallery ul li div.footer {
	text-align: center;
	height: 30px;
	overflow: hidden;
}

#gallery ul li div.footer {
	text-align: center;
	height: 30px;
	overflow: hidden;
}

#gallery ul li a.folder div.footer {
	font-weight: bold;
	height: 30px;
	overflow: hidden;
}

#gallery ul li.module div.body img {
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
	height: 80px;
	max-width: 120px;
	clear: both;
}

#gallery ul li.module:hover {
	border: 1px solid #3388cc;
}

#gallery ul li a {
	color: black;
	text-align: center;
	vertical-align: middle;
	display: block;
	height: 100%;
}

[furbostandby]

Devi riuscire a centrare l'intera tabella... magari includendola in un div su cui imposti la proprietà

div#tabella{
    text-align:center;
}

Ciao

[Mich_]

Originariamente inviato da furbostandby
Devi riuscire a centrare l'intera tabella... magari includendola in un div su cui imposti la proprietà

div#tabella{
    text-align:center;
}

Ciao

Risposta con ben due gravi errori.
1. Non e` una tabella, ed e` un grave errore semantico usare tabelle dove non ci sono dati tabellari
2. text-align serve per centrare il testo, non elmenti di tipo blocco. Infatti nei brwoser standard non funziona.

Per rispondere alla domanda di IoHacker:
Non e` facile.
In linea teorica potrebbe essere sufficiente dare margini automatici al contenitore (nel tuo caso l'elemento <ul>), ma non e` detto che funzioni.

Esempio:

html, body {
  width: 100%;                  /* altrimenti le % piu` interne non hanno significato */
}
#gallery {
  min-height: 400px;
  width: 100%;
}

#gallery ul {
  margin: 0 auto;
  /* qui NON ci va la definizione di width */
}
#gallery li {
  width: 150px;
}

Ripeto: in qualche brwoser potrebbe funzionare, ma non e` sicuro.
Si puo` anche pensare di usare un JS (che lavora a posteriori e mette un margine sx opportuno al <ul>)

[furbostandby]

Scusate, avevo capito che fosse una tabella

[loHacker]

Originariamente inviato da Mich_
Risposta con ben due gravi errori.
1. Non e` una tabella, ed e` un grave errore semantico usare tabelle dove non ci sono dati tabellari
2. text-align serve per centrare il testo, non elmenti di tipo blocco. Infatti nei brwoser standard non funziona.

Per rispondere alla domanda di IoHacker:
Non e` facile.
In linea teorica potrebbe essere sufficiente dare margini automatici al contenitore (nel tuo caso l'elemento <ul>), ma non e` detto che funzioni.

Esempio:

html, body {
  width: 100%;                  /* altrimenti le % piu` interne non hanno significato */
}
#gallery {
  min-height: 400px;
  width: 100%;
}

#gallery ul {
  margin: 0 auto;
  /* qui NON ci va la definizione di width */
}
#gallery li {
  width: 150px;
}

Ripeto: in qualche brwoser potrebbe funzionare, ma non e` sicuro.
Si puo` anche pensare di usare un JS (che lavora a posteriori e mette un margine sx opportuno al <ul>)

Grazie per la risposta, penso che userò una larghezza fissa almeno finché non ci sarà una soluzione più semplice.