How to center verticaly blocks in two bootstrap columns? - html

Question

I have this html:
<div class="col-xs-12">
<div class="row">
<div class="col-xs-8">
<h2>Some big header</h2>
</div>
<div class="col-xs-4 select">
<select class="form-control">
<option>TMP</option>
</select>
</div>
</div>
<div class="row">some more text</div>
</div>
and I am getting this result:
There is margin property on tag h1 so there are some blank space above h1. There are no such space above select, so this elements are not centered.
"What you've tried?"
I've tried bad and monstrouse method. I know it can be used to center divs. But not in this case... I have added line-height and height properties to the select:
.select {
height: 80px;
line-height: 80px;
}
.form-control {
display: table-cell;
}
Yes, it worked, but it is not relative at all. What if on left column there will be h2 text, not h1?
jsFiddle example of "what you tried?"
Also, "what you've tried?" 2: I tried to use form-horizontal class. Look this:
And the code:
<div class="col-xs-12 form-horizontal">
<div class="row form-group">
<div class="col-xs-8">
<h2 class="control-label">Some big header</h2>
</div>
<div class="col-xs-4 ">
<select class="form-control">
<option>TMP</option>
</select>
</div>
</div>
</div>
Also, text in the left column is right aligned (as form label, obvious). I don't want this.
jsFiddle example of "what you tried?" 2
So the question is: how I can center both elements vertically? Highly prefer using bootstrap classes and approaches. Don't suggest methods, where you specifying height of div, margins or paddings: it is not relative at all.

Answer 1

To be able to use vertical alignment, I think you need to override the floating used by bootstrap classes, and use inline-block for the columns. It's not exactly a bootstrap approach, but I think it works and is responsive. There is one disadvantage that can be a bit annoying, is that you need to make sure there is no space between the divs...
<div class="col-xs-12">
<div class="row">
<div class="col-xs-8 vcenter-col">
<h2 class="control-label">Some big header</h2>
</div><!-- comment required to prevent line break...
--><div class="col-xs-4 vcenter-col">
<select class="form-control">
<option>TMP</option>
</select>
</div>
</div>
</div>
.vcenter-col {
display: inline-block;
vertical-align: middle;
float: none;
}
Jsfiddle
Did I understand correctly your question?

Answer 2

Try this CSS :
h2 {
margin: 0;
}
BootStrap does a lot off things in CSS, so be careful to correcty set your CSS selector to not override all BootStrap CSS.
But, does your HTML can't change ? Is seems to me that the H2 element should have been a LABEL.