CODEWITHSUNDEEP
javascripthtmlcsszurb-foundation
Michael
Michael

Reputation: 33297

Center a Button Vertically in a Table in the CSS Foundation Framework?

I have a Foundation button: 

<a href="#" class="button tiny alert radius FormSubmit">Delete</a>

Which is inside a table row cell: ``button```

enter image description here

As you can see the button is not aligned vertically centered.

Here is a JSFiddle I created to show the problem.

<table class="centered columns">
    <thead>
        <tr>
            <td>Granted</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>true</td>
            <td><a href="#" class="button tiny alert radius FormSubmit">Delete</a>  </td>
        </tr>

    </tbody>
</table>

How can I center a Button Vertically in a Table in the CSS Foundation Framework?

Upvotes: 0

Views: 1393

Answers (4)

Code Warrior
Code Warrior

Reputation: 438

Just add Margin Auto to button class

.button{
    margin: auto;
}

and remove previous styling Because it will sift up and it will not work;Auto will also be responsive as compare to position absolute

Upvotes: 1

Andrey
Andrey

Reputation: 1553

You are just need to remove the button margin-bottom property.

jsfiddle

Upvotes: 4

Andrew
Andrew

Reputation: 1880

This will centre everything in the middle of your table. But as its CSS3 you will need to only be worried about modern browsers.

td{
  position:relative; 
}
.button{
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

JSFIDDLE

Upvotes: 1

William Herring
William Herring

Reputation: 97

add id="top-padding" into button and add this bit of CSS

<style>
#top-padding {
padding-top: 10px;

}

</style>

might not be perfect but you can mess around with the number of pixels until it is centered

Upvotes: 0

Related Questions