Foto affiancate, con testo descrittivo sotto ognuna

[Daniele87]

Ciao. Ho un problema di paginazione per una galleria di immagini. Ho una pagina asp che mi visualizza dinamicamente un tot di immagini (di numero variabile). Vorrei che queste si disponessero una di fianco all'altra, andando a capo quando non ci stanno più su una riga. Fosse solo questo, sarebbe facile. Il problema è che ogni immagine ha una stringa di testo sotto di essa, tipo un nome/descrizione che, chiaramente, deve andare a capo con l'immagine cui appartiene.
Ho provato così:

<div id="tabella">

	<div class="item">
		[img]images/img1.jpg[/img]

		foto uno
	</div>

	<div class="item">
		[img]images/img2.jpg[/img]

		foto due
	</div>

	<div class="item">
		[img]images/img3.jpg[/img]

		foto tre...
	</div>

	<div class="clear"></div>

</div>

#tabella{
	margin-left:20px;
	margin-right:auto;
	text-align:center;
}

#tabella .item {
	text-align:center;
	width:auto;
}

#tabella div.item {
	float:left;
	margin-right:10px;
}

.clear{
	clear:both;
}

In effetti così si impagina come voglio io, però è tutto allineato sulla sinistra. Quindi se ho solo una o due foto è tutto a sinistra, invece vorrei che si allineassero in mezzo.
Ho provato di tutto, ma non trovo soluzione. Chiaro che usando il float:left non si potrà mai fare che si centrino, a meno che io imposti il div "tabella" in modo tale da avere la larghezza che si adatti allo spazio che occupano le foto. Ma come fare? width:auto non serve a niente!
Qualche idea?

[Daniele87]

up

[Mich_]

#tabella{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

Inoltre se vuoi centrare anche in IE, devi mettere il text-align: center anche nel blocco che contiene il div #tabella.

Poi se vuoi sistemare anche le finezze, devi agire sui margini delle singole .item: devono essere uguali a dx e sin.

[Daniele87]

Grazie mille per la risposta, però non funziona (ne su IE ne su FF).
Infatti #tabella si allarga per tutto lo spazio disponibile. Se anche venisse centrata nel div che la contiene, non ci se ne accorge perchè ne occupa tutta la larghezza. Quindi gli elementi .item flottati tutti a sinistra dentro alla tabella non risultano centrati.

Altre proposte?

[Mich_]

Hai ragione: non avevo notato il width:auto dentro i singoli blocchi.
Forse basta semplicemente togliere il width, oppure definire una larghezza per gli .item. Esempio:

qualcosa {
	text-align: center;
	background: pink;
}
#tabella{
	margin: 0 auto;
	text-align:center;
	background: red;
}
#tabella .item {
	/* text-align:center; c'e` gia` nel contenitore: non serve */
	/* width: 30em; */
	float: left;
	margin: 0 5px;
	background: green;
}
.clear{
	clear:both;
}

Gli sfondi li ho messi per notare come si suddivide lo spazio: chiaramente andranno tolti una volta che funziona.

[Daniele87]

Grazie per la pazienza, intanto.
Però ancora non va... Usando gli stili che hai scritto tu, non cambia niente, purtroppo. Infatti, l'unico modo per centrare il div #tabella sembrerebbe essere quello di dargli una dimensione in pixel. Se metto, per esempio, width:250px, va bene se ci sono solo tre foto, però se ne vengono aggiunte altre, queste si posizionano di sotto, ovviamente: la larghezza è fissa e non si adatta al contenuto.
Non so più dove sbattere la testa