travée centrale verticale (étiquette d'amorçage) ainsi que d'autres éléments

Question

Je voudrais utiliser les étiquettes inline du cadre css bootstrap:

<span class="label">Default</span>

Malheureusement, ces étiquettes ne sont pas centrées verticalement lorsqu'ils sont utilisés conjointement avec d'autres éléments.

<p>
  <span class="label"><a href="#">test</a></span>This is a test heading.
</p>

S'il vous plaît voir le code complet pour un exemple visuel: http://jsfiddle.net/kvPpm/

Je suis conscient de la hauteur de ligne et des solutions de contournement de positionnement absolu / relatif mais n'a pas été en mesure de les appliquer correctement.

Comment puis-je centrer verticalement ces étiquettes?

Answer 1

Depuis <span> est un élément inline par défaut, vous pouvez simplement faire:

span { vertical-align: middle|top|bottom; }

Et cela devrait fonctionner. http://jsfiddle.net/kvPpm/1/

Mais <a> l'intérieur <span> n'est pas sémantiquement correcte. Vous pouvez simplement utiliser <a> et le style display: inline.

http://jsfiddle.net/kvPpm/3/

Answer 2

.label { vertical-align: top; } 

Cela a fonctionné pour moi quand je voulais qu'il soit correctement aligné dans un ul