Aligner verticalement du texte dans un élément avec un pourcentage de hauteur?

Question

Comme j'ai un élément avec une hauteur en pourcentage, je ne peux pas utiliser le hack ligne-hauteur. Est-ce que quelqu'un a des idées sur la façon de résoudre ce problème?

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

Answer 1

Voici ce que vous voulez: http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html

Answer 2

Vous devez définir la valeur de la hauteur de la div, puis réglez-hauteur de la ligne: value_of_div_height. line-height 100% ne fonctionnera pas car il prendra la valeur du texte, pas l'élément div. Il fonctionne avec ou sans-alignement vertical, tant que la hauteur = hauteur de ligne

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

Méthode alternative si vous voulez faire avec un paragraphe dans un élément 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

Si vous définissez la taille de police, et vous connaissez le nombre de lignes de texte que vous avez. Vous pouvez envelopper le texte dans une plage. Et utilisez le CSS suivant sur la durée.

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