la hauteur de la ligne en tant que pourcentage ne fonctionne pas

Question

Je rencontre un problème avec la hauteur de la ligne que je ne suis pas tout à fait obtenir ma tête autour de.

Le code suivant sera le centre d'une image dans un div:

CSS

.bar {
    height: 800px;
    width: 100%;
    line-height:800px;
    background-color: #000;
    text-align: center; 
}

.bar img {
    vertical-align: middle;   
}

HTML

<div class="bar">
    <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

Cependant, si je change la hauteur de la ligne à 100%, alors la hauteur de la ligne ne prend pas effet (ou au moins ne pas devenir à 100% de la div).

Exemple jsfiddle

Personne ne sait ce que je fais de mal?

Answer 1

line-height: 100% 100% de la taille de la police de l'élément n'est pas à 100% de sa hauteur. En fait, la hauteur de la ligne est toujours par rapport à la taille de la police, pas à la hauteur, à moins que sa valeur utilise une unité de longueur absolue (px, pt, etc).

Answer 2

Lorsque vous utilisez le pourcentage de la hauteur de la ligne, il n'est pas basé sur la div conteneur, c'est plutôt basé sur la taille de police.

Answer 3

line-height: 100% serait un moyen facile d'verticalement centre d'éléments, si elle avait été calculée par rapport au récipient, mais ce serait trop facile, donc il ne fonctionne pas.

Donc, au lieu de cela, c'est juste une autre façon de dire la hauteur de la ligne: cadratin (1 em (à droite?)

Une autre façon de à la verticale de centrage d'un élément serait:

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

Answer 4

peut-être pas assez, mais ça fonctionne, et sa sémantique;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

display: table-cell donne un élément de la table unique ablillity pour aligner verticaly (au moins je pense que son unique)