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

Question

I have a Foundation button:

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

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

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?

possible duplicate of [How to align text vertically center in div with CSS?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — isherwood, Jul 24 '15 at 13:50
I updated my answer here is the fiddle http://jsfiddle.net/fqk8ossu/2/ — Michael, Jul 24 '15 at 13:51
Take a look at the Related section in the sidebar. There's probably no Foundation mechanism for this, but it's been asked and answered many times otherwise. — isherwood, Jul 24 '15 at 13:54

Andrey Etumyan · Accepted Answer · 2015-07-24T14:07:53.163

4

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

jsfiddle

edited Jul 24 '15 at 14:07

answered Jul 24 '15 at 13:59

Andrey Etumyan

1,394
11
17

Andrew · Answer 2 · 2015-07-24T13:54:58.940

1

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

edited Jul 24 '15 at 13:54

answered Jul 24 '15 at 13:47

Andrew

1,850
14
18

I updated your jsfiddle the `td` needs `position:relative` so the button does not jump up – Andrew Jul 24 '15 at 13:55

score 1 · Answer 3 · answered Jul 24 '15 at 14:13

1

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

answered Jul 24 '15 at 14:13

Code Warrior

438
6
14

score 0 · Answer 4 · answered Jul 24 '15 at 13:54

0

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

answered Jul 24 '15 at 13:54

William Herring

97
1
8

1

Ha ha this is a dirty fix and not very elegant. – Michael Jul 24 '15 at 13:55
haha better dirty than not working. At least a short-term solution – William Herring Jul 24 '15 at 13:56

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

4 Answers4