Vertical align

[Sammynet]

Domandina curiosa:

come faccio ad allineare il testo in verticale nel div?


/*credits*/
#credits {width:760px; height:22px; margin:0px; position:relative; text-align:left; background:#CCCCCC; font: bold 10px verdana; color:#FFFFFF}
#credits A {font: bold 10px verdana; color:#FFFFFF; margin-left:5px; text-decoration:none; vertical-align:middle}

Grazie!

[antos]

devi impostare il line-height, es se il di è alto 100px:

<div style="line-height:100px;text-align:center;">
link
</div>

[secan]

In questo modo tu stai dicendo che il testo deve essere centrato verticalmente all'interno dei tag <a></a> del <div id="credits"></div> anzichè all'interno del div stesso. Se invece vuoi centrare il testo nel <div> devi modificare il tuo CSS in questo modo:

#credits {
         width:760px;
         height:22px; 
         margin:0px;
         position:relative;
         text-align:left;
         vertical-align: middle; 
         background:#CCCCCC;
         font: bold 10px verdana;
         color:#FFFFFF;
         }

oppure (ma non sono sicuro)

#credits a {
           font: bold 10px verdana;
           color:#FFFFFF;
           margin-left:5px;
           margin-top: auto;
           margin-bottom: auto; 
           text-decoration:none;
           }

[antos]

Originariamente inviato da secan
In questo modo tu stai dicendo che il testo deve essere centrato verticalmente all'interno dei tag <a></a> del <div id="credits"></div> anzichè all'interno del div stesso. Se invece vuoi centrare il testo nel <div> devi modificare il tuo CSS in questo modo:

#credits {
         width:760px;
         height:22px; 
         margin:0px;
         position:relative;
         text-align:left;
         vertical-align: middle; 
         background:#CCCCCC;
         font: bold 10px verdana;
         color:#FFFFFF;
         }

...

funziona sia come ho detto io che come hai detto tu ma in questo caso è meglio scrivere come hai fatto tu
il secondo sistema NON fuziona

[Sammynet]

Non funziona in nessun caso...

[Sammynet]

da quello che ho letto sul w3c con i div nn funziona

[Sammynet]

funziona cosi

<div id="credits" style="line-height:22px">#

Non avevo visto il primo post :quipy: