使用Foundation将按钮居中

Question

我试图使用基础中心按钮,这是我的代码:

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

阅读文档后,我相信上面应该有用,我错过了什么吗？

Answer 1

您的代码仅以列为中心.默认情况下,列中的所有内容都将按左对齐.

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

如果要将内容置于列中,则必须text-center在CSS类中添加:

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

结果将是:

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