Project FH Project FH - 5 months ago 16
CSS Question

Vertical-align on a Bootstrap column in a height-defined container

I am trying to do a vertical-align on col-sm-12 inside of a height-defined container but this doesn't work.

I have tried a lot of different methods and nothing seems to work.



.home-main-elem {
content: "";
display: block;
background: url('XXXX') no-repeat bottom left;
height: 450px;
-webkit-background-size: cover;
background-size: cover;
color: #FFF;
}
h1 {color: #FFF;}
.font-orange {color: #ffcc43;}
.vertical-middle {
float: none;
vertical-align: middle;
display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="home-main-elem">
<div class="container">
<div class="row">
<div class="col-sm-12 vertical-middle">
<h1>Welcome to <span class="font-orange">XXXX</span></h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum qui dolore quam et fugiat hic tenetur, quasi in doloremque reiciendis quia, blanditiis eaque adipisci explicabo, facere enim fuga repellendus sunt!
</p>
<a href="#" class="btn btn-orange">SIGN UP</a>
</div>
</div>
</div>
</div>




Answer

Unfortunately the Bootstrap framework does not have a great way 'Out of the box' of vertically centering the content.

There are 2 ways I can think of how to do this but it would require additional CSS and HTML.

Method 1: Use display: flex

See an example here

.wrap {
  display: flex;
  align-items: center;
}

The CSS flexbox model allows us to better manage how our elements are positioned.

Method 2: Use display: table

See an example here

.wrap {
  display: table;
  width: 100%;
}
.item {
  display: table-cell;
  vertical-align: middle;
}

Table cells are capable of being vertically centered within a table

Comments