altezza tag DIV per centrare contenuti nella finestra del browser

**andreac_fe** · 27-09-2006, 17:58

Chiedo cortesemente se qualcuno conosce il modo per poter collocare dei contenuti (testo, immagini e altro) esattamente al centro della finestra del browser in un pagina html sia in senso orizzontale che verticale utilizzando un tag DIV. Il problema è relativo all'allineamento verticale. Ho provato ad impostare un tag div con altezza 100% ma rimane comunque alto come il contenuto. In passato mediante le tabelle si poteva centrare contenuti semplicemente creando tabelle alte il 100% e queste centravano verticalmente il contenuto a qualsiasi risoluzione, ma vorrei utilizzare i css per gestire il layout come da tendenze recenti.
Spero di essere stato sufficientemente chiaro.
Grazie a tutti

A.

**Mich_** · 27-09-2006, 18:07

Attenzione che il 100% e` relativo alla misura del box che lo contiene (forse il <body>).
Se il body non ha una dimensione fissata, questa e` il piu` piccolo possibile.

Quindi se vuoi un box alto 100% devi specificare anche:
html, body { height 100%; }

Poi devi specifcare da qualche parte
vertical-align: middle;
per centrare in IE il contenuto del box

E sistemare i margini del box da centrare ad auto (per i browser standard).

**andreac_fe** · 27-09-2006, 18:45

Grazie mille Mich_,

ho provato ma non sono riuscito nell'intento. Incollo di seguito il codice della pagina dove dentro il box ho collocato una semplice tabella che vorrei visualizzare al centro verticale come dicevo nel mio priomo post. Se hai tempo dai un'occhiata per verificare qual'e' l'errore.

Grazie ancora!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
html, body { height 100%; }


</style>
</head>

<body>
<div class="contenuto">
<table width="200" border="2" cellspacing="10" cellpadding="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>

**Mich_** · 28-09-2006, 09:03

Io ho visto errori di sintassi: ti conviene passare la pagina dal validatore HTML e dal validatore CSS

Attenzione anche alla formattazione fatta con attributi HTML: in qualche caso contrasta con la formattazione CSS e da` risultati imprevedibili.

**andreac_fe** · 02-10-2006, 17:44

Grazie ancora Mich_,

cercherò di fare altre prove, e pensare che si faceva così presto con le tabelle ad allineare al centro verticalmente!

Se ti dovesse venire in mente qualche pagina web dove posso trovare un esempio per la soluzione del problema, ti prego di segnalarmelo.

A presto

A.

**Mich_** · 03-10-2006, 08:52

Gli esempi che conosco sono tutti citati tra i "link utili", che ti consiglio di guardare.

In realta` l'impressione di "fare piu` presto" con le tabelle e` una sensazione comune a tutti coloro che conoscono quella tecnica e nonhanno ancora digerito il sistema razionale. Occorre concentrarsi sul significato semantico dei tag usati (ed usare i tag piiu` corretti), poi il CSS segue in modo lineare e semplice (alla fine piu` semplice delle tabelle).

Discussione: altezza tag DIV per centrare contenuti nella finestra del browser

Strumenti discussione

Ricerca discussione

Visualizza

altezza tag DIV per centrare contenuti nella finestra del browser

Permessi di invio