垂直中心跨度（自举标签）与其他元素一起使用

Question

我想使用bootstrap css框架的内联标签：

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

不幸的是，当与其他元素一起使用时，这些标签不会垂直居中。

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

请参阅完整代码以获取可视示例：http://jsfiddle.net/kvPpm/

我知道行高和绝对/相对定位解决方法，但无法正确应用它们。

如何将这些标签垂直居中？

Answer 1

由于<span>默认为inline元素，因此您可以执行以下操作：

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

它应该有效。 http://jsfiddle.net/kvPpm/1/

但<a>内的<span>在语义上并不正确。您可以使用<a>并为其设置样式display: inline。

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

Answer 2

.label { vertical-align: top; } 

当我想让它在ul

中正确对齐时，这对我有用