title: How to align `button-group` horizontal in the centre of the column div?
body: <pre><code>&lt;div class="row"&gt;
    &lt;div class="large-12 columns"&gt;
      &lt;ul class="button-group "&gt;
        &lt;li&gt;&lt;a class="tiny secondary button" href="#"&gt;3 months&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="tiny secondary button" href="#"&gt;6 months&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="tiny secondary button" href="#"&gt;9 months&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="tiny secondary button" href="#"&gt;1 year&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="tiny secondary button" href="#"&gt;2 years&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried to add <code>text-center</code> to the <code>ul</code> and also <code>large-centered</code> to the column without success.</p>
  
  <p>I believe there is a class in <code>foundation</code> to centre the group of buttons, but I could not find it.</p>
  
  <p><a href="http://jsfiddle.net/vZdbY/1/" rel="nofollow">http://jsfiddle.net/vZdbY/1/</a></p>