使用Foundation将按钮居中

Question

我试图使用粉底中心按钮，这是我的代码：

<div class="row">
    <div class="small-6 small-centered columns">
        <a href="#" class="button">Default Button</a>
    </div>
</div>

阅读完文档后，我相信上面的内容应该有效，我错过了什么吗？

Answer 1

您的代码仅以列为中心。默认情况下，列中的所有内容都将按预期进行左对齐。

+---+---+---+---+---+---+---+---+---+---+---+---+
|           |<a>                    |           |  
+---+---+---+---+---+---+---+---+---+---+---+---+

如果您想将内容集中在列中，则必须在CSS类中添加text-center：

<div class="row">
    <div class="small-6 small-centered text-center columns">
        <a href="#" class="button">Default Button</a>
    </div>
</div>

结果将是：

+---+---+---+---+---+---+---+---+---+---+---+---+
|           |          <a>          |           |  
+---+---+---+---+---+---+---+---+---+---+---+---+

Answer 2

<div class="grid-x grid-margin-x">
        <div class="cell small-4">&nbsp;</div>
        <div class="cell small-4"><a href="#" class="button">Default Button</a></div>
        <div class="cell small-4">&nbsp;</div>
</div>