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

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; }

但是<a>内部<span>在语义上并不正确.你可以使用<a>它并设计它display: inline.