Allinea verticalmente il testo all'interno di un elemento con una percentuale di altezza?

Question

Dato che ho un elemento con un'altezza percentuale, non posso usare l'hack dell'altezza della linea. Qualcuno ha qualche idea su come risolvere questo?

<div height="100%"> 
    I want to be vertically aligned in the middle 
</div> 

Answer 1

Ecco ciò che si vuole: http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html

Answer 2

È necessario impostare il valore dell'altezza di div, quindi impostare line-height: value_of_div_height. line-height 100% non funzionerà perché prenderà il valore del testo, non div elemento. Funziona con o senza vertical-align, a patto che height = line-height

div { 
    height: 200px; 
    line-height: 200px; 
    display: block; 
} 

metodo alternativo se si vuole fare con un paragrafo all'interno di un elemento div: http://www.w3.org/Style/Examples/007/center

DIV.container { 
    min-height: 10em; 
    display: table-cell; 
    vertical-align: middle } 
... 
<DIV class="container"> 
    <P>This small paragraph... 
</DIV> 

Answer 3

Se si imposta la dimensione del font e conosci il numero di righe di testo che hai. Puoi avvolgere il testo in un intervallo. E usa il seguente CSS sull'intervallo.

span { 
    font-size:20px; 
    margin-top:-10px; //half the font-size (or (font-size*number of lines)/2) 
    position: relative; 
    top: 50%; 
}