Layout generico per centramento immagini

[Gas75]

Salve.
Se nella pagina foglio1.htm utilizzo qualcosa di questo tipo...

#destro
{
	background: url(immagine1.png) no-repeat center center;
	align: center;
	vertical-align: center;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	height: 100%;
}

ottengo il centramento orizzontale e verticale dell'immagine1.png nel foglio1.htm; la stessa cosa la posso ottenere con...

img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -300px 0 0 -200px;
}

ma se avessi anche foglio2.htm, foglio3.htm, ecc... ciascuna che visualizza un'immagine diversa (per grandezza e nome, che quindi non posso generalizzare nel css), come faccio, con un unico css a fargli caricare l'immagine giusta centrata, che chiaramente verrà richiamata dal codice html, non dal foglio di stile?

[mrseo88]

Fai un contenitore generico per l'immagine
esempio:

#box_img
{ 
posizion:absolute;
  width:300px;
  height:300px;
  left:-150px;
  top:-150px;
 }

foglio1.html:

<div id="box_img">
[img]foglio1.jpg[/img]

foglio2.html:

<div id="box_img">
[img]foglio2.jpg[/img]

[explosivdymamic]

Se devi mantenere le stesse dimensioni dell' immagine originale potresti usare un Css processor (o come si chiama) cioè un file Js che permette di usare variabili all' interno dei Css così da avere un codice dinamico per adattare ogni immagine

[Gas75]

@ mrseo: qualcosa non va nel tuo codice... Se metto left e top con valori positivi, centro l'immagine, sennò "se ne va a passeggio"...
Il div in questione deve occupare tutta la larghezza della finestra, non essere limitato a una larghezza fissa, a meno di un margine sinistro dove c'è un altro div flottato... Particolare che ho trascurato di dire non ritenendolo necessario.

In pratica il codice che mi funziona alla perfezione, ma su una sola pagina, è questo:

#menu
{
	float: left;
	margin-left: 5px;
	padding: 15px 0px 0px 0px;
	text-align: left;
	width: 200px;
	height: 100%;
	line-height: 250%;
	border-right: 1px solid #ffffff;
}

#panoramica
{
	background: url(specializzazioni_panoramica.png) no-repeat center center;
	align: center;
	vertical-align: center;
	margin: 0px 0px 0px 211px;
	padding: 0px;
	height: 100%;
}

Come puoi verificare, se dò un width a #panoramica (o al tuo #box_img) perdo il centramento dell'immagine nel layout completo.

@ explosivdynamic: interessante (e mi sembra la soluzione ottimale), ma è al di sopra delle mie competenze. Vedrò se trovo qualcosa da adattare al caso mio, grazie.

---

PS: la soluzione col background non posso usarla anche perché alcune di queste immagini devo mapparle!

[Gas75]

Ho risolto con un div...

#destro
{
	margin: 0px 0px 0px 211px;
	padding: 0px;
	height: 100%;
}

contenente una (cara vecchia comoda) tabella!

<div id="destro">
	<table width="100%" height="100%" border="0">
		<tr>
			<td align="center" valign="middle">[img]panoramica.png[/img]</td>
		</tr>
	</table>
</div>

I 211px di margine sono dovuti al div accanto...