I'll-Be-Back I'll-Be-Back - 3 months ago 6
CSS Question

Vertical middle content in div?

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

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

Comments