Vertical alignment in bootstrap's spans

Question

Is there any work around for vertical alignment of elements or texts in bootstrap spans relative to other spans

For eg. if I have a row and spans like this

<div class="row-fluid">
   <div class="span3" style="background-color:lightblue">Description</div>
   <div class="span9" style="background-color:pink">
   Lorem ipsum Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  ....
   </div>
</div>

It looks like this

So is there a way to show "Description" vertically center of the next span's height?

Answer 1

You could try out some absolute centering tricks with CSS. For example, if you're willing to: 1) declare the height of the div to be centered, and 2) Make your .row-fluid position: relative; then perhaps this sample could work for you.

Resulting in the following DOM:

<div class="row-fluid relative">
    <div class="span3">
        <div class="vercenter" style="background-color:lightblue">Description</div>
    </div>
    <div class="span9" style="background-color:pink">Lorem Ipsum...</div>
</div>

And CSS:

.relative {
    position: relative;
}
.vercenter {
    height: 1.5em;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}