顯示：表格單元格混淆

Question

我在包裝div元素中有一組28個鏈接。每一個字母都是字母加數字和＃表示「全部」。每個都向左漂移。我希望文字水平和垂直居中。使用下面的代碼，我將它水平居中，但當我期望它的時候，vertical-align：middle似乎沒有任何效果，因爲您可以在具有display：table-cell的元素上使用它。有人有主意嗎？

a { 
    float: left; 
    position: relative; 
    display: table-cell; 
    width: 30px; 
    height: 30px; 
    margin: 0 4px 4px 0; 
    @include border-radius(4px); 
    text-align: center; 
    vertical-align: middle; 
    text-decoration: none; 
    color: #fff; 
    @include blue-gradient; 

    &:nth-of-type(14n) { 
    margin-right: 0; 
    } 

    &:hover { 
    top: -1px; 
    } 
} 

親切的問候， 尼爾

Answer 1

你可以使用：

line-height: 30px; 

Answer 2

我會使用line-height屬性垂直居中。我發現垂直對齊很少有效，因爲它與其他屬性衝突，瀏覽器忽略它。