En CSS, pourquoi le texte centré verticalement apparaît à l'intérieur de <span> ou de <a>?

Question

Une manière habituelle à centrer verticalement du texte en ligne ou de l'image est

#one-div { font: 16px/16px Verdana, Arial, sans-serif } 
#one-div * { vertical-align: middle } 

avec le code HTML de

<div id="one-div"> 
    hello <span>world</span> try 
    <a href="http://www.google.com">more</a> 
    <span><span><span>see</span></span></span> 
</div> 

voir l'exemple à: http://jsfiddle.net/934Zu/2/

Il peut être comparé à: http://jsfiddle.net/934Zu/1/

Voici un exemple de comment ils sont centrés verticalement: http://jsfiddle.net/934Zu/6/

Pourquoi les éléments à l'intérieur de <span> ou <a> s'affichent de plus en plus bas? Le <span> n'a pas de remplissage ou de marge ou de bordure, donc aucun espace vertical ne devrait être là.

Ce qui pourrait être un moyen de le réparer afin que la ligne de texte (et les images, si intérieur <span> et/ou <a>) peuvent être alignés verticalement parfaitement? (Autre que de mettre tout dans le même niveau de imbriqué <span> ou <a>, qui pourrait ne pas être une solution tout à fait élégante)

(et plus important encore, pourquoi est-elle apparue plus en plus bas en premier lieu?)

Answer 1

réponses finales (?):

http://jsfiddle.net/ctrlfrk/V9j82/2 - solution de David.

http://jsfiddle.net/SebastianPataneMasuelli/934Zu/23/ - ma solution. produisent tous les deux des éléments en ligne centrés verticalement à l'intérieur d'un div.

#one-div * { vertical-align:bottom } le fera. Le problème est que l'alignement vertical est appliqué récursivement; ici, il est visuallized: http://jsfiddle.net/SebastianPataneMasuelli/934Zu/4/

vous pouvez également utiliser #one-div * {line-height: 20px;} http://jsfiddle.net/SebastianPataneMasuelli/934Zu/5/