Menu
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?
383
In Bootstrap 5, if we want to vertically align an <div> element in the center, we can do this by applying the class align-items-center on the containing element of that div.
The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.
To center div both vertically and horizontally use flexbox utilities. See the examples. Add d-flex align-items-center justify-content-center classes to the parent element to center its content vertically and horizontally.
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.
http://jsfiddle.net/kvPpm/3/
62
.label { vertical-align: top; }
This worked for me when I wanted it to be aligned properly in a ul
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
