Salve a tutti, la mia domanda è semplice: come posso ottenere l'allineamento verticale del div "container" attraverso i CSS? In altre parole: posso centrare verticalmente il div "container" all'interno del body?
N.B. per centrare orizzontalmente il div "container" utilizzo:codice:<body> <div id="container"> <div id="header"> </div> <div id="navigation"> </div> <div id="footer"> </div> </div> </body>
codice:body{text-align:center;}
Certo che puoi, ma prima correggerei la regola per la centratura orizzontale del div, visto che text-align: center è il modo sbagliato (e purtroppo necessario per IE!!!). Per centrare il div orizzontalmente nei browser che supportano gli standard dovresti usare nella sua regola di stile: margin: 0 auto. Purtroppo IE fa sempre di testa sua e usa text-align: center nell'elemento padre per centrare un box!!! Per questo devi usare entrambi i metodi.
Invece, visto che la centratura verticale si ottiene con un posizionamento assoluto, potresti sfruttare la stessa tecnica per centrare il div anche orizzontalmente, eliminando quindi sia il "margin: 0 auto" nella regola del div che il "text-align: center" nella regola del body.
Eccoti la regola per la centratura sia orizzontale che verticale (che presuppone che tu conosca a priori entrambe le dimensioni del div da centrare):
XX e YY sono le dimensioni del box "container", mentre X e Y sono pari alla metà di esse. In pratica, il tuo margin-top deve essere la metà dell'altezza del box e margin-left deve essere la metà della larghezza del box. Entrambi i margini sono negativi.codice:#container { width: XXpx; height: YYpx; position: absolute; top: 50%; left: 50%; margin-top: -Xpx; margin-left: -Ypx; }
attenzione che la tecnica coi margini negativi non funziona per IE su Mac
1000 GRAZIE, 6 Stato chiarissimo!!!Originariamente inviato da seed_squall_it
Certo che puoi, ma prima correggerei la regola per la centratura orizzontale del div, visto che text-align: center è il modo sbagliato (e purtroppo necessario per IE!!!). Per centrare il div orizzontalmente nei browser che supportano gli standard dovresti usare nella sua regola di stile: margin: 0 auto. Purtroppo IE fa sempre di testa sua e usa text-align: center nell'elemento padre per centrare un box!!! Per questo devi usare entrambi i metodi.
Invece, visto che la centratura verticale si ottiene con un posizionamento assoluto, potresti sfruttare la stessa tecnica per centrare il div anche orizzontalmente, eliminando quindi sia il "margin: 0 auto" nella regola del div che il "text-align: center" nella regola del body.
Eccoti la regola per la centratura sia orizzontale che verticale (che presuppone che tu conosca a priori entrambe le dimensioni del div da centrare):
XX e YY sono le dimensioni del box "container", mentre X e Y sono pari alla metà di esse. In pratica, il tuo margin-top deve essere la metà dell'altezza del box e margin-left deve essere la metà della larghezza del box. Entrambi i margini sono negativi.codice:#container { width: XXpx; height: YYpx; position: absolute; top: 50%; left: 50%; margin-top: -Xpx; margin-left: -Ypx; }
Sì, Andrea ha ragione, ma penso non sia un vero problema. Da quello che so, chi ha il mac difficilmente sceglie di usare IE come browser e cmq, IE per mac ormai è arrivato all'ultima versione...ultima in tutti i sensi. Da quest'anno viene definitivamente abbandonato.
si infatti anche io non sviluppo più per ie su mac... magari aveva delle richieste particolari: è sempre meglio specificareOriginariamente inviato da seed_squall_it
Sì, Andrea ha ragione, ma penso non sia un vero problema. Da quello che so, chi ha il mac difficilmente sceglie di usare IE come browser e cmq, IE per mac ormai è arrivato all'ultima versione...ultima in tutti i sensi. Da quest'anno viene definitivamente abbandonato.
Più che giusto
Permessi di invio
Rispondi quotando