How to align the horizontal line of the `button-group` in the center of a div column?

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 adding text-center to ul as well as large-centered to the column with no success.

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

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

Answer 1

Bring ul to li with display: inline-block , and then pass text-align: center 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 violin

Working script (using display: built-in li unit)

Answer 2

Just register here if anyone is facing a problem ...

Based on @Mr_Green's answer, I solved the problem of adding display: inline-block to ul with the new css class, avoiding changes affecting the use of button-group in other parts of my application.

HTML:

 <div class="row"> <div class="large-12 text-center columns"> <ul class="button-group fix_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> 

CSS

 .fix_button_group{ display: inline-block; }