Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2011
    Messaggi
    17

    centrare verticalmente elementi con numero di righe variabile

    Buongiorno a tutti,
    forse una domanda stupida e già fatta 1000 volte ma a cui ancora non ho trovato risposta:
    ho un menù, l'altezza delle voci è fissa ma il testo contenuto varia, può contenere una o due righe.
    La domanda è: come faccio a centrare verticalmente il testo?
    Per favore, fatemi esempi pratici.
    Grazie 1000 in anticipo!

    PS: non ho grossi vincoli, posso mettere dei DIV o altro se servono, mi basta avere una soluzione valida crossbrowser.

  2. #2
    Utente di HTML.it L'avatar di mrseo88
    Registrato dal
    Jan 2012
    residenza
    Italia
    Messaggi
    75
    usa line-height
    esempio :
    codice:
    #menu{line-height:30px;}

  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2011
    Messaggi
    17
    Grazie per la risposta.
    Purtroppo line-height funziona solo con testo su una riga.
    Quello che cerco io è un metodo crossbrowser per centrare verticalmente sia testi di una riga che testi di più righe, così:

    **
    **
    ** Testo su una riga
    **
    **

    **
    **
    ** Testo su
    ** più righe
    **
    **

    Ho trovato in giro qualche metodo che utilizza table e table-cell ma, oltre a non funzionare su ie7 e precedenti, non capisco perchè non riesco a farlo funzionare all'interno del mio sito drupal.
    Ogni suggerimento comunque è ben accetto.
    Grazie

  4. #4
    Utente di HTML.it
    Registrato dal
    Jun 2011
    Messaggi
    17
    Risolto.
    Se a qualcuno può interessare ecco il codice utilizzato:

    codice:
    <style type="text/css">
          #test a {
             background: #ccc;
             display: table;
             text-align: center;
             width: 300px;
             height: 300px;
             *display: block;
             *position: relative;
           }
           #test a span {
             display: table-cell;
             vertical-align: middle;
             *display: block;
             *position: absolute;
             *text-align: center;
             *left: 0px;
             *width: 100%;
             *cursor: pointer;
             *top: expression(this.parentElement.clientHeight / 2 - this.clientHeight / 2);
           }
    </style>       
    
    <div id="test">
            <a href=".">
             <span>
               Hello all the
    world
             </span>
           </a>
         </div>
    Non è farina del mio sacco...ecco la fonte:
    http://www.ninthavenue.com.au/blog/c...ntent-with-css

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 © 2026 vBulletin Solutions, Inc. All rights reserved.