Centered column

We can center a column by using the small-centered class.

Here is a demo on centered column.

As same as the grid, there is medium-centered and large-centered class. We don’t need the medium and large because they will inherit the small-centered class if we hasn’t specify.

If we want to un-center a column in specific screen size, we can use the medium-uncentered and large-uncentered.

Open example in jsFiddle

<div class='header-bg'>
  <div class='row'>
    <div class='small-6 small-centered columns'>Big Title Here</div>
  </div>
</div>

 .header-bg {
   background: url(http://placekitten.com/1000/500) center center;
   background-size: cover;
   background-attachment: fixed;
   padding: 3em;
 }
 
 .columns {
   background: rgba(255, 255, 255, .5);
  border: 1px solid blue;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-bottom: 1em;
}

What’s next? We’re going to take a look at “Push and pull column”.