Contenuto sempre centrato height e width 100%

**webdemo** · 19-05-2006, 14:06

Molto spesso ci sono utenti che chiedono come centrare i contenuti della loro pagina al centro dello schermo, sia in orizzontale che in verticale.

Ho scritto queste due righe utilizzando come contenitore una <table> mono riga e monocolonna.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>sempre centrato</title>
<style type="text/css">
<!--
body, html {
	height: 100%;
}
table {
	height: 100%;
	width: 100%;
	text-align:center;
	background-color:#CCCCCC;
}
-->
</style>
</head>

<body>
<table>
		<tr>
				<td>qui elemento sempre centrato verticalmente e orizzontalmente</td>
		</tr>
</table>
</body>
</html>

nb il codice, xhtml 1.0 strict, passa indenne la vaidazione W3C

Va correttamente con IE e FF su OSX.
mi fate sapere se fate delle prove con altri browser?

ciaux

**webdemo** · 20-05-2006, 12:42

me la canto e me la suono...

l'ho testato anche su IE6 e FF - PC

ciaux

**Mich_** · 22-05-2006, 10:16

Il codice passa la validazione sintattica, ma non passa la validazione semantica

Infatti l'uso di una tabella solo per centrare un oggetto e` un grave errore semantico.
Pensa come vien reso quel codice da uno screen-reader:

Tabella di una riga ed una colonna
Prima riga - prima colonna
... contenuto ...
Fine tabella

Se invece della tabella usi un <div>, la cosa funziona lo stesso, e usi un codice corertto

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>sempre centrato</title>
<style type="text/css">
/*<![CDATA[*/
body, html {
  height: 100%;
  width: 100%;
  text-align: center;     /* per sistemare IE */
  vertical-align: middle;
}
#centrato {
  margin: auto; /* oppure 0 auto per centrare solo orizz. */
  background-color: #CCC;
}
/*]]*/
</style>
</head>
<body>
  <div id="centrato">
    
  </div>
</body>
</html>

Nota che in XHTML Strict non si puo` inserire il CSS dentro il file HTML, salvo includerlo in commenti CDATA, come nel mio esempio.

**webdemo** · 22-05-2006, 10:31

si, ero a conoscenza dell'inesattezza concettuale di questa soluzione, l'errore è stato quello di non scriverlo,
ma avendo fatto svariate prove con i div e non avendo trovato nessuna soluzione...
Cmq non funziona per ora neanche il codice che mi hai proposto, che somiglia molto a uno dei miei precedenti tentativi.
Se provi a togliere il commento alla scritta ti accorgerai che non si posiziona al centro geometrico dello schermo, per ora non ho un pc davanti, ma almeno su tutti i brw mac è così.

ciaux

**Mich_** · 22-05-2006, 10:58

Prova a mettere un bordo al <div id="centrato">: cio` che viene centrato e` il <div>. Cosa poi succeda al suo interno non dipende da quel CSS, ma dal CSS degli oggetti all'interno.

Hai per caso un link? Io non ho Mac, ma FF sotto linux.

**webdemo** · 22-05-2006, 11:14

ok, l'ho caricato qui

ciaux

**Mich_** · 22-05-2006, 12:19

Ci sono dei problemi con il validatore HTML http://validator.w3.org/check?uri=ht...ecentrato.html
tutti dovuti alla presenza del CSS.
Forse occorre inserire anche un commento HTML.

Io vedo il blocco grigio in alto, esteso per tutta la larghezza, con il testo centrato.

Forse ocorre definire larghezza ed altezza del blocco da centrare, esempio:

#centrato {
margin: auto;
background-color: #CCC;
color #000;
width: 30em;
height: 5 em;
}

**webdemo** · 22-05-2006, 15:13

ho fatto delle piccole modifiche e ora il div contenitore è a 100% in larg e lung,
manca però la centratura in verticale...

ciaux

**Federix** · 22-05-2006, 16:08

Ragazzi, io ho provato i vostri codici ma non ne funziona uno. In orizzontale tutto bene, ma questo non era difficile, mentre in verticale non funge niente

www.anjel.it

**webdemo** · 22-05-2006, 16:55

si, infatti, ancora non va con i div stiamo cercando una soluzione

per il momento funziona ma solo con <table> (vedi 1° esempio)

ciaux

Discussione: Contenuto sempre centrato height e width 100%

Strumenti discussione

Ricerca discussione

Visualizza

Contenuto sempre centrato height e width 100%

Permessi di invio