Vertical middle content in div? - css

Question

I using bootstrap. Does bootstrap have selector put text in the middle in the div rather than at the top?
See example: https://jsfiddle.net/DTcHh/23497/
Can you can see Create user accounts for your staff is at the top which should be in the middle lined up with a button.
How to do this in bootstrap?
<div class="row">
<div class="col-md-8">
Create user accounts for your staff.
</div>
<div class="col-md-4">
<div class="clearfix">
<div class="pull-right">
<a class="btn btn-lg btn-primary " href="#">Add Staff</a>
</div>
</div>
</div>
</div>

Answer 1

.row .col-md-4,
.row .col-md-8{
display:inline-block;
vertical-align:middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-vertical">
<div class="col-md-8">
Create user accounts for your staff.
</div>
<div class="col-md-4">
<div class="clearfix">
<div class="pull-right">
<a class="btn btn-lg btn-primary " href="#">Add Staff</a>
</div>
</div>
</div>
</div>

Answer 2

If you have the capability of using flex you can extend Bootstrap to support a vertical flexbox solution using just a bit of simple CSS:
.row.row-vertical {
display: flex;
align-items: center;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-vertical">
<div class="col-md-8">
Create user accounts for your staff.
</div>
<div class="col-md-4">
<div class="clearfix">
<div class="pull-right">
<a class="btn btn-lg btn-primary " href="#">Add Staff</a>
</div>
</div>
</div>
</div>
Note: You can read more about FlexBox and its support here: http://caniuse.com/#feat=flexbox

Answer 3

add these rules to your css
.col-md-8,.col-md-4{
display:inline-block !important;
vertical-align:middle !important;
}
.col-md-4{
float:right !important
}
It is wise to add an Id to your specific html elements to prevent breaking bootstrap and add these css rules to your ids.good luck...