CODEWITHSUNDEEP
csshtmltwitter-bootstrapvertical-alignment
fanti
fanti

Reputation: 1927

vertically center span (bootstrap label) together with other elements

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?

Upvotes: 5

Views: 26061

Answers (2)

Adam K Dean
Adam K Dean

Reputation: 7475

.label { vertical-align: top; }

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

Upvotes: 2

elclanrs
elclanrs

Reputation: 94101

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/

Upvotes: 6

Related Questions