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;
}

Working fiddle

Working fiddle （使用display：inline-block to li's ）

Answer 2

只是在这里注册以防其他人面临问题...

根据@Mr_Green的回答，我解决了使用新的css类向display: inline-block添加ul的问题，避免这些更改影响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;
}

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

2 个答案: