垂直中心跨度（引导标签）与其他元素一起

Posted 2023-03-05

【中文标题】垂直中心跨度（引导标签）与其他元素一起

【英文标题】：vertically center span (bootstrap label) together with other elements

【发布时间】：2012-03-08 07:19:05

【问题描述】：

我想使用引导 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/

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

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

【参考方案1】：

由于默认情况下<span> 是inline 元素，您可以这样做：

span  vertical-align: middle|top|bottom; 

它应该可以工作。 http://jsfiddle.net/kvPpm/1/

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

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

【参考方案2】：

.label  vertical-align: top;  

当我希望它在 ul 中正确对齐时，这对我有用