在CSS Foundation Framework中將按鈕垂直居中放置在表格中？

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 Foundation Framework中的表中垂直放置按鈕？

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

只需將保證金自動添加到按鈕類

.button{
    margin: auto;
}

並刪除以前的樣式，因為它會過篩並且不起作用；與絕對位置相比，自動也會響應

Answer 4

在按鈕中添加id =“ top-padding”並添加CSS

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

}

</style>

可能並不完美，但您可以弄亂像素數，直到居中