Html 垂直中心跨度(引导标签)与其他元素一起

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9318968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:35:35  来源:igfitidea点击:

vertically center span (bootstrap label) together with other elements

csshtmltwitter-bootstrapvertical-alignment

提问by fanti

I'd like to use the inline labels of the bootstrap css framework:

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

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

Unfortunately these labels are not vertically centered when used together with other elements.

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

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

Please see the full code for a visual example: http://jsfiddle.net/kvPpm/

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

I am aware of the line-height and absolute/relative positioning workarounds but was not able to apply them correctly.

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

How can I vertically center these labels?

如何垂直居中这些标签?

回答by elclanrs

Since <span>is an inlineelement by default you can just do:

由于默认情况下<span>是一个inline元素,您可以这样做:

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

And it should work. http://jsfiddle.net/kvPpm/1/

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

But then <a>inside <span>is not semantically correct. You can just use <a>and style it display: inline.

但是然后<a>inside<span>在语义上是不正确的。您可以使用<a>它并设置它的样式display: inline

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

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

回答by Adam K Dean

.label { vertical-align: top; } 

This worked for me when I wanted it to be aligned properly in a ul

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