0

我在包装器 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;
  }
}

亲切的问候，尼尔

4

2 回答 2

1

你可以使用：

line-height: 30px;
于 2012-06-28T21:44:42.510 回答
0

我会使用 line-height 属性来垂直居中。我发现垂直对齐很少起作用，因为它与其他属性冲突并且浏览器会忽略它。

于 2012-06-28T21:46:58.980 回答