css - 在内联 block anchor 标记上垂直居中对齐

Question

我需要让我的链接和按钮看起来一样，但我无法以与“按钮”标签相同的方式垂直对齐“a”标签内的文本。重要的是要注意标签需要能够处理多行文本(因此 line-height 将不起作用)。

a,button {
  display: inline-block;
  -moz-box-sizing: border-box;
  width: 150px;
  height: 150px;
  vertical-align: middle;
  border: 1px solid #000;
  text-align: center;
}

请参阅下面的 jsfiddle:

http://jsfiddle.net/bZsaw/3/

如您所见，我可以结合使用内部的 span 标记并将“display:table”设置为“a”并设置“display:table-cell”和“vertical-align:middle” "到跨度，但这在 IE7 中不起作用。

a,button {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    text-align: center;
}

a {
    display: table;
    -moz-box-sizing: border-box;
}

a span, button span {
    vertical-align: middle;
    text-align: center;
}

a span {
    display: table-cell; 
}

寻找一个简单的纯 CSS 解决方案。

Answer 1

我发现垂直对齐文本并在文本太长时允许换行的唯一可靠方法是使用 2 容器方法。

外层容器的行高至少应是内层容器行高的两倍。在您的情况下，这意味着以下内容:

a {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    text-align: center;
    line-height: 150px;
    display: block;
}

a span {
    display:inline;
    display:inline-table;
    display:inline-block;
    vertical-align:middle;
    line-height: 20px;
    *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}

如果您希望内联所有内容，请在 a 标签上添加 float left。这也是 A 标签中带有长文本的更新示例。 http://jsfiddle.net/bZsaw/13/

您可以将 span 上的行高设置为您喜欢的任何值，如果它小于父容器行高的一半，它将居中并在文本超过父容器宽度时允许文本换行。据我所知，这适用于所有现代浏览器。