Newsgroup: it.comp.www.html
Titolo: Centrare verticalmente con i css

Dunque, si discuteva delle colonne autoridimensionanti con i css,
ovvero di box con dimensioni in percentuale...
Ora pongo un altro quesito, per me fondamentale, visto che spesso
ricorro a box centrati nella pagina sia verticalmente che
orizzontalmente.
Finora ho utilizzato questo sistema:
<table width="100%" height="100%">
<tr>
<td>ELEMENTO DA CENTRARE</td>
</tr>
</table>
Ma, volendo arrivare ad affidare tutto ai css, voglio anche evitare di
ricorrere a trucchetti di questo tipo.
Con i css ho trovato come centrare orizzontalmente un elemento,
utilizzando il selettore margin:
div.style1 {
	width: 550px;
	heidght: 450px;
	margin: auto;
}
Tuttavia non sono ancora riuscito a scoprire un sistema per centrare
verticalmente un elemento in modo valido per ogni browser e per ogni
risoluzione.
Ho sentito che è possibile utilizzare uno script elaborato, che
posizioni l'elemento con uno sniffin che, in base alla risoluzione del
monitor fornisca la distanza tra l'elemento e il bordo superiore della
pagina.
Ma mi sembra che per una cosa del genere sia un po' assurdo
appesantire con uno script complesso un documento html.
Avete qualche soluzione o suggerimento?
Io trovo semplicemente inaccettabile non poter centrare verticalmente
un elemento...

 risoluzione.
[CUT]
Ad esempio:
..coso {
   position: absolute;
   top: 35%;
   left: 45%;
   ...
}
Elemento con classe "coso" verrà posizionato con un margine del 35% del
documento partendo dall'alto e 45% partendo da sinistra.
-- 
[Non siamo materia che aspetta, ma schemi che si perpetuano.]
Rhadamanth.net (
http://www.rhadamanth.net
)
Web Garbage (
http://www.web-garbage.com
)

documento partendo dall'alto e 45% partendo da sinistra.
Sicuro che funzioni?
Ho provato qualcosa di simile e non m'ha dato alcun risultato
"adattabile".
Mo' riprovo...

documento partendo dall'alto e 45% partendo da sinistra.
Dunque, dunque...
Ho fatto delle altre prove, hai ragione: funziona bene in Explorer (6)
e Mozilla, ma non in Opera (7).
Nell'ultimo browser si adatta orizzontalmente, variando le dimensioni
della pagina, ma verticalmente rimane fisso.
Potrebbe anche essere un accettabile compromesso, visto che Opera è un
browser usato pochissimo... tuttavia mi piacerebbe poter raggiungere
una migliore compatibilità.
Per inciso, Opera non applica perfettamente i fogli di stile anche in
altri casi: per esembio per azzerare il padding del tag body: body {
padding: 0px;} per Opera è come se non esistesse, perciò bisogna
dargli sempre anche body { padding: 0px; margin: 0px; } 
Bisognerebbe rompersi un po' la testa e predisporre un foglio di stile
alternativo valido solo per Opera... mah, non so, queste soluzioni
però mi lasciano sempre un po' perplesso...

 Avete qualche soluzione o suggerimento?
Ciao,
prova a dare un'occhiata a questo link, magari ti può essere utile!
http://www.constile.org/template/centrare_il_box/
Paola

 Finora ho utilizzato questo sistema:
Io ho provato questo:
BODY{
bla
bla
bla
text-align: center;
}
#vattelapesca{
width: 500px;
height: 400px;
margin: 0px;
text-align: justify;
ecc.ecc
}
ovviamente solito codice:
<div id="vattelapesca">blablabla</div>
-- 
www.pinkatmosphere.com
webmistress - webdesigner

 Finora ho utilizzato questo sistema:


 però mi lasciano sempre un po' perplesso...
No, basta scrivere un CSS, che comprenda gli hack per i vari browser.
Ciao.


Paola
Sě, grazie, l'avevo appena scoperta anch'io questa pagina!
;-)

Io ho provato questo:
Ma con questo sistema centri solo orizzontalmente.

No, basta scrivere un CSS, che comprenda gli hack per i vari browser.
Eh... questa è la cosa che mi fa più scervellare!
Fare in modo che tutti i browser si comportino alla stessa maniera.
Explorer in particolare interpreta i css tutto a modo suo.
Per esempio ho problemi con il corsivo... ma questo merita un post a
parte.