Centrare immagine in un div, orizzontalmente e verticalmente

**fmortara** · 21-06-2012, 01:50

La domanda è certamente stata fatta, ma non trovo una soluzione adatta al mio caso.

la mia situazione è questa:

codice:

#container {width:100%; height:100%; line-height:100%; background:#f00; overflow:hidden;}

#image {margin:0; height:100%; line-height:100%; background:#00f;}
	#img {height:100%; background:#ccc; text-align:center;}
	#imgs {max-width:100%; max-height:100%; margin: 0 auto; vertical-align: middle; text-align:center;}

#social {float:right; width:300px; height:100%; background:#ff0;}


<div id="container">

	<div id="social">
		social
	</div>	

	<div id="image">
		
		<div id="img">
			[img][/img]
		</div>
		
	</div>
	
</div>

Con questa soluzione, ottengo il dimensionamento dell'immagine alle dimensioni richieste se l'immagine è maggiore, e la centro in orizzontale.

Come posso fare per centrarla in verticale?

Ho provato con display: table-cell; al div img e display:table; al div image, ma poi non mi funziona e non so perché il max-height:100% e l'immagine se più alta crea un scroll che non voglio.

che mi potete dire?

le dimensioni del container e dell'html e del body sono tutte al 100% perché la finestra si apre in un layer al 95% della finestra del browser, per cui non so prima quanto devono essere.

ma non è li il problema, il problema che non risolvo è il centrare l'immagine in verticale.

grazie in anticipo.

**Mich_** · 21-06-2012, 08:12

Se devi centrare in verticale solo l'immagine (che e` un oggetto di tipo inline) e non ci sono altri oggetti dentro il contenitore (che deve essere di tipo block), ti basta definire line-height uguale a height nel contenitore.

Se invece non ci sono solo oggetti di tipo inline, l'unica soluzione che conosco e` usare i posizionamenti assoluti e il margin-top al 50% (vedi la discussione apposita tra i "link utili").

PS: evita di usare nomi id= uguali ai tag: ad esempio hai due oggetti che si chiamano img: in qualche caso si puo` generare confusione

**fmortara** · 21-06-2012, 09:30

Si, il nome dei div è diverso qui, in realtà anno tutti un pop_ davanti che avevo tolto qui...

quindi il line-height dovrei darlo al div image o al div img, considerando i nomi attuali?
o all'immagine direttamente?

Ecco la situazione reale:
Ho corretto i nomi degli id e ho tolto l'id all'immagine che non serve al momento.

codice:

#pop_container {display:block; width:100%; height:100%; background:#f00; overflow:hidden;}
#pop_image {display:block; margin:0; height:100%; background:#00f;}
	#image {display:block; height:100%; background:#ccc; text-align:center;}
	#image img {max-width:100%; max-height:100%;}
#pop_social {float:right; width:300px; height:100%; background:#ff0;}

<div id="pop_container">

	<div id="pop_social">
		social
	</div>	

	<div id="pop_image">
		
		<div id="image">
			[img][/img]
		</div>
		
	</div>
	
</div>

Il line height 100% non viene proprio interpretato...

**Prill** · 21-06-2012, 10:02

Sì, la tecnica del line-height ha problemi con l'altezza in percentuale. Col display-table non ci sono invece problemi con Explorer9, Opera, Firefox su cui ho provato:

codice:

#pop_container {width:100%; height:100%; background:#f00;display:table;vertical-align: middle;}
.cella {width:100%; height:100%; background:#f00;display:table-cell;vertical-align: middle;}

img {vertical-align: middle;}
#pop_social {float:right; width:300px; height:100%; background:#ff0;}


</style>
</head>
<body>

<div id="pop_container">
  <div class="cella">
   qqq[img]foto.JPG[/img]
  </div>
<div class="cella">
<div id="pop_social">
		social
	</div>
</div>		
</div>
	
</div>

	
</div>
  </body>
</html>

(non ho inserito il css per le vecchie versioni di Explorer e il div ulteriore)

**fmortara** · 21-06-2012, 10:13

Originariamente inviato da Prill
Sì, la tecnica del line-height ha problemi con l'altezza in percentuale. Col display-table non ci sono invece problemi con Explorer9, Opera, Firefox su cui ho provato:

codice:

#pop_container {width:100%; height:100%; background:#f00;display:table;vertical-align: middle;}
.cella {width:100%; height:100%; background:#f00;display:table-cell;vertical-align: middle;}

img {vertical-align: middle;}
#pop_social {float:right; width:300px; height:100%; background:#ff0;}


</style>
</head>
<body>

<div id="pop_container">
  <div class="cella">
   qqq[img]foto.JPG[/img]
  </div>
<div class="cella">
<div id="pop_social">
		social
	</div>
</div>		
</div>
	
</div>

	
</div>
  </body>
</html>

(non ho inserito il css per le vecchie versioni di Explorer e il div ulteriore)

Non capisco, nel codice ci sono due div chiusi mai aperti...

**Prill** · 21-06-2012, 10:19

rimuovili pure, copiando e modificando il codice velocemente non lo ho ricontrollato. Ciò che volevo mostrarti era solo il corretto funzionamento della tecnica col display-table

**fmortara** · 21-06-2012, 10:28

Con questa situazione ho due problemi:

CSS:

codice:

/* reset */
html, body {margin:0; padding:0; border:0; width:100%; height:100%;}


/* font face */
@font-face {
   font-family: 'Museo 500';
   src: url('/templates/default/css/fonts/Museo500-Regular.eot');
   src: local('Museo 500'), url('Museo500-Regular.otf');
   src: local('Museo 500'), local('Museo-500'), url('/templates/default/css/fonts/Museo500-Regular.woff') format('woff'), url('/templates/default/css/fonts/Museo500-Regular.otf') format('opentype');
}

/* general settings */
body {background:none;}

#pop_container {display:table; width:100%; height:100%; max-height:100%; background:#f00;}

#pop_image {display:table-cell; height:100%; max-height:100%; background:#00f; text-align:center; vertical-align:middle;}
	#image {display:table-cell; width:100%; height:100%; background:#ccc; }
	#image img {display:inline; max-width:100%; max-height:100%;}

#pop_social {display:table-cell; width:300px; height:100%; background:#ff0; vertical-align:top;}

HTML:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />	
	
	<link rel="stylesheet" type="text/css" href="/templates/default/css/pop_screen.css" />

	<title><?php echo getWindowTitle(); ?></title>
	
	
</head>
<body id="pop">

<div id="pop_container">

	<div id="pop_image">
		
		<div id="image">
			[img][/img]
		</div>
		
	</div>
	
	<div id="pop_social">
		social
	</div>	

</div>
	
</body>

</html>

qui succede che:
1. l'immagine è allineata a sinistra.
2. se l'immagine è più alta del contenitore appare uno scroll come se il max.height non funzionasse, mentre se riduco la finestra del browser e ricarico la pagina il max-width funziona regolarmente. questo problema è presente ogni volta che metto il display table e table cell ai div.

**fmortara** · 21-06-2012, 10:50

riporto la situazione attuale e il problema che ho

codice:

/* CSS */

/* reset */
html, body {margin:0; padding:0; border:0; width:100%; height:100%;}


/* font face */
@font-face {
   font-family: 'Museo 500';
   src: url('/templates/default/css/fonts/Museo500-Regular.eot');
   src: local('Museo 500'), url('Museo500-Regular.otf');
   src: local('Museo 500'), local('Museo-500'), url('/templates/default/css/fonts/Museo500-Regular.woff') format('woff'), url('/templates/default/css/fonts/Museo500-Regular.otf') format('opentype');
}

/* general settings */
html {background:#f00;}
body {background:#00f;}

#pop_container {width:100%; height:100%; max-height:100%; background:#f00; overflow:hidden;}

#pop_image {height:100%; max-height:100%; margin:0 300px 0 0; background:#00f; text-align:center;}
	#image {width:100%; height:100%; background:#ccc; }
	#image img {max-width:100%; max-height:100%;}

#pop_social {float:right; width:300px; height:100%; background:#ff0;}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />	
	
	<link rel="stylesheet" type="text/css" href="/templates/default/css/pop_screen.css" />

	<title><?php echo getWindowTitle(); ?></title>
	
	
</head>
<body>

<div id="pop_container">
	
	<div id="pop_social">
		social
	</div>	

	<div id="pop_image">
		
		<div id="image">
			[img][/img]
		</div>
		
	</div>

</div>

	
</body>

</html>

**fmortara** · 21-06-2012, 17:42

nessuno mi sa aiutare?
li c'è tutto il codice attuale di pagina e css...

**fmortara** · 22-06-2012, 16:50

non si può fare?

Discussione: Centrare immagine in un div, orizzontalmente e verticalmente

Strumenti discussione

Ricerca discussione

Visualizza

Centrare immagine in un div, orizzontalmente e verticalmente

Permessi di invio