显示：表格单元格混乱

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属性垂直居中。我发现vertical-align很少有效，因为它与其他属性冲突，浏览器会忽略它。