CODEWITHSUNDEEP
htmlcsszurb-foundation
panthro
panthro

Reputation: 24061

Centering a button with Foundation

Im trying to center a button using foundation, here is my code:

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

After reading the docs, I believe the above should work, am I missing something?

Upvotes: 0

Views: 8172

Answers (2)

Yojana Ambavkar
Yojana Ambavkar

Reputation: 106

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

Upvotes: 0

Cartucho
Cartucho

Reputation: 3319

Your code center the column only. All content inside the column will be left-aligned by default as expected.

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

If you want to center the content inside the column, you have to add text-center in your CSS class:

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

And the result would be:

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

Upvotes: 8

Related Questions