如何在列div的中心对齐`button-group`水平？

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>

我试图添加text-center到列,但ul也large-centered没有成功.

我相信有一个班级foundation可以使按钮组居中,但我找不到它.

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

Answer 1

使ul适合于li使用的display: inline-block,然后给text-align: center到的父元素ul标签.

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

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

工作小提琴

工作小提琴(使用display:inline-block to lis)