Add helper layout class to center content

[thomastuts]

This adds the .centered class which can be used either on a column, or outside of the grid. This also allows us to center content that is not placed in a grid row (for example, a fixed-width navigation, ...). This fixes issue #52.

@mdo #52 said you wanted to implement it on a column level, however, wouldn't it be better to have a .centered class like this which you can also use to center non-grid content?

[mdo]

Agreed, this is probably going to be a better approach.

[mdo]

We'll probably want to move this to _utility.scss to reiterate it's intended uses. Care to make that change and perhaps take a stab at adding a docs section for it? If not, no worries, I'll handle it :).

[thomastuts]

Sounds good. Do the docs belong in the Layout or the Utilities section? My gut feeling says Layout since that's where I'd look for something like this myself.

[mdo]

I'd say it's worth putting most of the docs in the utilities section—explaining it's purpose and how the CSS works for it—and then mention you can use the utility class in our Layout section with an grid column example.

[thomastuts]

Took a little longer than expected, but the docs are added now. Not sure how you feel about this, though:

{% example html %}
<div class="columns">
  <div class="one-half column centered">
    .one-half
  </div>
</div>

<br />

<nav class="menu centered">
  <a class="menu-item selected" href="#">Account</a>
  <a class="menu-item" href="#">Profile</a>
  <a class="menu-item" href="#">Emails</a>
  <a class="menu-item" href="#">Notifications</a>
</nav>
{% endexample %}

Without the <br />, things would stick together vertically and look ugly. Any thoughts on this, or a potential fix?