If I have some text in a row with a button in Bootstrap, what's the best way to have the text line up with the text in the button? http://jsfiddle.net/TNRgu/9/ demonstrates - the "foo", "bar" and "sometext" are aligned with the top of the button, how can I get them centred vertically?
<div class="container">
<div class="row">
<a class="span2">foo</a>
<a class="span2">bar</a>
<span class="span2>some text</span>
<div class="span2">
<button class="btn btn-success">
<i class="icon-off icon-white"></i>
<span>Baz</span>
</button>
</div>
</div>
</div>
I know I could add (e.g.) 5px padding to the top of each but is there a more generic way so that it always lines up?
EDIT: adjusted the above to add the after the tags
You can use btn-link class on your links:
<div class="container">
<div class="row">
<div class="span2">
<a class="btn btn-link">foo</a>
</div>
<div class="span2">
<a class="btn btn-link">bar</a>
</div>
<div class="span2">
<button class="btn btn-success">
<i class="icon-off icon-white"></i>
<span>Baz</span>
</button>
</div>
</div>
</div>
From bootstrap documentation:
Deemphasize a button by making it look like a link while maintaining button behavior
UPD
btn-link class can also be applied to span, so it will look like a link
Or you can create something similar to btn-link class, e.g. btn-text:
.btn-text,
.btn-text:active,
.btn-text:hover,
.btn-text:focus {
color: inherit;
cursor: inherit;
border-color: transparent;
background-color: transparent;
background-image: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}