How to align `button-group` horizontal in the centre of the column div?

Question

<div class="row">
  <div class="large-12 columns">
    <ul class="button-group ">
      <li><a class="tiny secondary button" href="#">3 months</a></li>
      <li><a class="tiny secondary button" href="#">6 months</a></li>
      <li><a class="tiny secondary button" href="#">9 months</a></li>
      <li><a class="tiny secondary button" href="#">1 year</a></li>
      <li><a class="tiny secondary button" href="#">2 years</a></li>
    </ul>
  </div>
</div>

I tried to add text-center to the ul and also large-centered to the column without success.

I believe there is a class in foundation to centre the group of buttons, but I could not find it.

http://jsfiddle.net/vZdbY/1/

Answer 1

Make the ul fit to the li's using display: inline-block and then give text-align: center to the parent element of the ul tag.

.large-12.columns {  /* applies to the div which has the both classes */
    text-align: center;
}

ul.button-group{
    display: inline-block;
}

Working fiddle

Working fiddle (using display: inline-block to li's)