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

<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 add text-center ul , large-centered column without success.

i believe there class in foundation centre group of buttons, not find it.

http://jsfiddle.net/vzdby/1/

make ul fit li's using display: inline-block , give text-align: center parent element of ul tag.

.large-12.columns {  /* applies div has both classes */     text-align: center; }  ul.button-group{     display: inline-block; } 

working fiddle

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