Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it L'avatar di *Ray*
    Registrato dal
    Oct 2000
    Messaggi
    495

    Centrare verticalmente e orizzontalmente un rettangolone con del testo

    Ciao a tutti,

    vorrei risolvere con dell'HTML elegante il problema nel topic.

    Ho bisogno di piazzare un box rettangolare con un testo dentro in mezzo a una pagina e piu' genericamente dentro a una cella di una tabella.

    Al momento attuale l'unico modo che ho trovato e' stato di fare una table width=100% height=100% con 3 righe, la prima e l'ultima alte il 40% del totale, e piazzo nella cella centrale il testo che mi serve e le proprieta' di stile relative.

    Per carita', funziona, peccato che stilisticamente faccia schifo.

    Esiste un modo piu' elegante per piazzare un box centrato in mezzo sia orizz. che soprattutto verticalmente in mezzo a una pagina e/o dentro una <TD> partendo dal presupposto che non posso andare a toccare le proprieta' del <TD> 'padre'?

  2. #2

    Vedi questa pagina, forse non va bene, ma...

    <style>
    body,html {
    height:100%;
    margin:0;
    background:#000; }
    #box {
    width:400px; height:400px;
    position:absolute;
    top:50%;left:50%;
    margin:-200px 0 0 -200px;
    border:1px solid #000;
    background-color:#f00;
    overflow:auto;
    }
    </style>

    <html><body scroll=no>



    <div id="box">
    testo contenuto







    qqq
    </div>
    </body>
    </html>
    Colleziono problemi matematici divertenti o strani e li raccolgo nel mio sito. Se me ne mandate qualcuno vi ringrazio. flan

  3. #3
    Utente di HTML.it L'avatar di *Ray*
    Registrato dal
    Oct 2000
    Messaggi
    495
    Dunque il trucco sta qui:

    codice:
    top:50%;left:50%; 
    margin:-200px 0 0 -200px;
    Dove imposti la posizione come assoluta e i margini negativi pari alla meta' della dimensione del box, giusto?

  4. #4
    Originariamente inviato da *Ray*
    Dunque il trucco sta qui:

    codice:
    top:50%;left:50%; 
    margin:-200px 0 0 -200px;
    Dove imposti la posizione come assoluta e i margini negativi pari alla meta' della dimensione del box, giusto?
    Ebbene SI l'hai scoperto! Semplice vero?
    Colleziono problemi matematici divertenti o strani e li raccolgo nel mio sito. Se me ne mandate qualcuno vi ringrazio. flan

  5. #5
    Utente di HTML.it L'avatar di *Ray*
    Registrato dal
    Oct 2000
    Messaggi
    495
    Nell'ipotesi che l'altezza del box voglio che sia in percentuale, il trucco funziona lo stesso?

  6. #6
    Utente di HTML.it L'avatar di span
    Registrato dal
    Jan 2004
    Messaggi
    1,644
    prova

  7. #7
    Utente di HTML.it L'avatar di *Ray*
    Registrato dal
    Oct 2000
    Messaggi
    495
    Si hai ragione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.