Centrare in verticale il layuot del sito!

**spiadadda** · 27-04-2007, 12:38

Ciao a tutti,
ho un layout costituito essensialmente (il Container) da un rettangolo di 760px di larghezza e 400 di altezza. Mi piacerebbe allineare verticalmente tutto il layout (quindi tutto il container e il suo contenuto) in modo da risultare sempre centrato al variare dei monitor e delle risoluzioni.

E possibile, quindi, centrare verticalmente il layout di un sito web? se si come?

Vi riporto il codice HTML della pagina web:

codice:

<body>
<div id="container">
	<div id="header"></div>

	<div id="container_content">I contenuti del sito</div>

	<div id="footer"> footer del sito</div>
</div>
</body>

Ho provato con

codice:

vertical-align: middle;

poisizionato nel file CSS ed in particolare nel BODY, ma non si allinea in verticale.

Avete qualche suggerimento?

Ciao Ciao

**Mich_** · 02-05-2007, 09:37

Il vertical-align serve per centrare le tabelle, per cui non ha effetto su altri oggetti.

Se conosci l'altezza, puoi usare i posizionamenti assoluti e i margini negativi.
Con il tuo HTML diventa una cosa del tipo:

codice:

#html, body {
  height: 100%;
}
#container {
  position: absolute;
  height: 400px;
  margin-top: -200px;
  top: 50%;
}

Per centrare in orizzontale la cosa e` simile.

PS: occhio agli effetti collaterali: il posizionamento assoluto di solito impedisce il corretto comportamento in caso di aumento delle dimensioni dei caratteri, e quindi va contro le regole di accessibilita` (e in qualche caso anche di usabilita`).

**serdominik** · 12-04-2010, 16:34

se non conosco l'altezza?

**franziska_new** · 07-03-2012, 17:14

Ciao a tutti,
sto cercando di centrare il layout della mia pagina nella finestra del browser, sia in verticale sia in orizzontale.
Usando i posizionamenti assoluti, come consigliato qui sopra:

codice:

html,body{height:100%;width:100%;}

#centrato{
position: absolute;
width: 640px;
height: 400px;
left: 50%;
top: 50%;
margin-left: -320px;
margin-top: -200px;
}

Ora, il layout risulta correttamente al centro della pagina, ma se ridimensiono la finestra del browser in altezza si attiva lo scroll, ma l'id non si posiziona al margine superiore=0. Perdo un bel pezzo di margine superiore della pagina.
Ecco un esempio simile al mio che ho trovato online:
http://www.allwebfree.it/articolo-cs...la-pagina.php, il primo link "pagina d'esempio" mostra esattamente lo stesso problema che sto riscontrando io.

Questo succede anche se indico un min-height del body pari all'altezza di #centrato.
Qualcuno sa dirmi il perché?

**franziska_new** · 07-03-2012, 17:34

Scusate, ho posto male la domanda, matematicamente il problema è chiaro.
Mi chiedevo perché succede anche con altezza e larghezza del body minime

Grazie

Discussione: Centrare in verticale il layuot del sito!

Strumenti discussione

Ricerca discussione

Visualizza

Centrare in verticale il layuot del sito!

Permessi di invio