From 775fb6a5845fd5aa5a55ceb174125139c98fac6d Mon Sep 17 00:00:00 2001
From: Thomas Tuts <thomas@darwinanalytics.com>
Date: Thu, 26 Mar 2015 07:34:51 +0100
Subject: [PATCH 1/3] Add helper layout class to center content

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, ...).
---
 scss/_layout.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/scss/_layout.scss b/scss/_layout.scss
index a871ef368b..d7023a1cd0 100644
--- a/scss/_layout.scss
+++ b/scss/_layout.scss
@@ -59,6 +59,14 @@
   padding-left: $grid-gutter;
 }
 
+// Centers content horizontally. Can be used inside or outside the grid.
+.centered {
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 // Equal width columns via table sorcery.
 .table-column {
   display: table-cell;

From 45c25a7be9963065232744017d8bf40ae9f3e33e Mon Sep 17 00:00:00 2001
From: Thomas Tuts <thomas@darwinanalytics.com>
Date: Tue, 31 Mar 2015 12:57:14 +0200
Subject: [PATCH 2/3] Move .centered class from layout to utility

---
 scss/_layout.scss  |  8 --------
 scss/_utility.scss | 11 +++++++++++
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/scss/_layout.scss b/scss/_layout.scss
index 92427a73c1..3a58c6f0c2 100644
--- a/scss/_layout.scss
+++ b/scss/_layout.scss
@@ -59,14 +59,6 @@
   padding-left: $grid-gutter;
 }
 
-// Centers content horizontally. Can be used inside or outside the grid.
-.centered {
-  display: block;
-  float: none;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 // Equal width columns via table sorcery.
 .table-column {
   display: table-cell;
diff --git a/scss/_utility.scss b/scss/_utility.scss
index eee3df5899..5d79969162 100644
--- a/scss/_utility.scss
+++ b/scss/_utility.scss
@@ -9,6 +9,17 @@
 .left { float: left; }
 
 
+// Layout
+
+// Centers content horizontally. Can be used inside or outside the grid.
+.centered {
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
 // Text alignment
 .text-right { text-align: right; }
 

From 347f70e47a968f7852e58d3f88bd065b61d46c7e Mon Sep 17 00:00:00 2001
From: Thomas Tuts <thomas@darwinanalytics.com>
Date: Thu, 2 Apr 2015 08:27:12 +0200
Subject: [PATCH 3/3] Add docs for .centered class to Layout & Utilities doc
 sections

---
 docs/layout.md    |  1 +
 docs/utilities.md | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/docs/layout.md b/docs/layout.md
index d16a66fc79..a8e848b797 100644
--- a/docs/layout.md
+++ b/docs/layout.md
@@ -32,6 +32,7 @@ The grid is pretty standard—you create rows with `.columns` and individual col
 - Create your outer row to clear the floated columns with `<div class="columns">`.
 - Add your columns with individual `<div class="column">`s.
 - Add your fractional width classes to set the width of the columns (e.g., `.one-fourth`).
+- Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class.
 
 In practice, your columns will look like the example below.
 
diff --git a/docs/utilities.md b/docs/utilities.md
index 75812b2f34..13c3744c08 100644
--- a/docs/utilities.md
+++ b/docs/utilities.md
@@ -47,6 +47,29 @@ Quickly float something to the left or right, and clear them later.
 </div>
 {% endexample %}
 
+## Centering content
+
+Center content if it's not taking up the full width of the container. Can be used on grid columns or any other elements.
+
+
+{% 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 %}
+
+
 ## Text alignment
 
 Change the `text-align` on elements with a class.