4 
<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/

4

2 回答 2

7

ul适合li's usingdisplay: 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 li's）

于 2013-08-28T15:06:53.197 回答
2

只是在这里注册以防其他人遇到问题...

根据@Mr_Green 的回答，我解决了添加display: inline-block到ul新css 类的问题，避免了影响button-group我应用程序其他部分使用的更改。

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;
}
于 2013-08-29T08:23:55.740 回答