CSS Foundation Framework 中的 Table 垂直居中按钮？

Question

我有一个 Foundation 按钮：

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

在 table 行单元格内：``button```

如您所见，按钮未垂直居中对齐。

这是我创建的 JSFiddle 来显示问题。

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

如何在 CSS Foundation Framework 的 Table 中使按钮垂直居中？

Answer 1

这将使所有内容都居中 table。但由于它 CSS3 你只需要担心现代浏览器。

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

JSFIDDLE

Answer 2

将id="top-padding"添加到按钮中并添加CSS

这一点

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

}

</style>

可能不完美，但您可以调整像素数直到它居中

Answer 3

您只需删除按钮 margin-bottom 属性。

jsfiddle

Answer 4

只需将保证金自动添加到按钮 class

.button{
    margin: auto;
}

并删除以前的样式因为它会筛选并且不起作用；与绝对位置相比，Auto 也会响应

CSS Foundation Framework 中的 Table 垂直居中按钮？

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

html

javascript

css

zurb-foundation