vertically center span (bootstrap label) together with other elements
-
26-10-2019 - |
Question
I'd like to use the inline labels of the bootstrap css framework:
<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/
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?
Solution
Since <span>
is an inline
element by default you can just do:
span { vertical-align: middle|top|bottom; }
And it should work. http://jsfiddle.net/kvPpm/1/
But then <a>
inside <span>
is not semantically correct. You can just use <a>
and style it display: inline
.
OTHER TIPS
.label { vertical-align: top; }
This worked for me when I wanted it to be aligned properly in a ul
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow