Centrare un testo verticalmente

**luca200** · 10-12-2008, 10:57

Sono tuttora convinto che sia una formidabile cazzata, ma non riesco a venirne fuori

Diciamo che ho un div ad altezza prefissata da foglio di stile (height:40px), e devo piazzare un testo al suo interno.
Questo testo è di lunghezza variabile, e può uscire su 1, 2 o 3 righe.
Se sono tre righe il problema non si pone, perché riempie lo spazio in verticale. Ma se le righe sono una o due, io vorrei che venissero centrate verticalmente nello spazio.
Ero partito convinto che fosse una scemenza, e dopo due ore di lite furiosa con i css non so come venirne a capo

help me please

thks

**fcaldera** · 10-12-2008, 12:12

probabilmente si può risolvere in modo elegante usando la proprietà inline-block
però al momento ho questo esempio, spero non sia un problema la presenza di commenti condizionali in mezzo al markup

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" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Liste</title>
        
        <style type="text/css">
        
        body {
            font            : 12px;
        }
        
        table, td, tr, body, html, ul {
            margin          : 0;
            padding         : 0;
        }
        
        ul {
            list-style-type : none;
            width           : 150px;
        }
        
 
        
        /*** centered menu ***/
        
        li {
            display         : table;
            height          : 5em;
            width           : 100%;
            *vertical-align : middle;  /* IE margin bug on[*] (try to remove it) */
            *overflow       : auto;
            border          : 1px solid #767676;   /*** Show borders ***/
        }
        

        
        li a {
            display         : table-cell;
            *display        : block;        /* IE */
            *width          : 100%;         /* IE */
            vertical-align  : middle;
            background      : #f0f2f1;     /*** Show link effective area ***/
            
        }



        ul.floated { width : 450px; }
        ul.floated li { float : left; width: 148px; }
        
        
        /*** for IE  ***/
        
        table { 
            border-collapse: collapse; 
        }
        
        table, tr, td {
            width           : 100%;
            height          : 100%;
            vertical-align  : middle;
            background      : #f0f2f1; 
        }
        
        
        

        </style>
        
    </head>
<body>

<h1>Centered lists</h1>

    <h2>Vertical menu</h2>
    <ul>[*]
            
                Voce 1
            
        [*]
            
                Voce 2 disposta su due righe di testo
            
        [*]
            
                Voce 3 disposta invece su ben tre brevi righe di testo.
            
        [/list]


    

    <h2>Horizontal menu</h2>
    <ul class="floated">[*]
            
            Voce 1
            
        [*]
            
            Voce 2 disposta su due righe di testo
            
        [*]
            
            Voce 3 disposta invece su ben tre brevi righe di testo.
            
        [/list]


</body>
</html>

Ciao

**luca200** · 10-12-2008, 13:01

Lo studierò, grazie

Discussione: Centrare un testo verticalmente

Strumenti discussione

Ricerca discussione

Visualizza

Centrare un testo verticalmente

Permessi di invio