在CSS基础框架中的表中垂直居中按钮？

Question

我有一个基金会按钮：

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

哪个在表格行单元格内：``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基础框架的表格中垂直居中按钮？

Answer 1

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

jsfiddle

Answer 2

这将把桌子中间的所有内容都集中在一起。但是作为CSS3，你只需要担心现代浏览器。

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

JSFIDDLE

Answer 3

只需将Margin Auto添加到按钮类

.button{
    margin: auto;
}

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

Answer 4

添加id =＆＃34; top-padding＆＃34;进入按钮并添加这一点CSS

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

}

</style>

可能不完美，但你可以乱用像素数直到它居中