css - 内联块锚标记上的垂直对齐中间

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 标签上添加左浮动。这是在 A 标签中也带有长文本的更新示例.. http://jsfiddle.net/bZsaw/13/

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

Answer 2

所有答案都没有更新，而且基本上都是 hack，你应该使用新的 CSS3 特性，在这种情况下是 flexbox

a,button {
  -moz-box-sizing: border-box;
  width: 150px;
  height: 150px;
  display:flex;/*CSS3*/
  align-items:center;/*Vertical align*/
  justify-content:center;/*horizontal align*/
  border: 1px solid #000;
}

<a href="#"><span>Testing 1,2,3</span></a>
    <button><span>Testing 1,2,3</span></button>

这应该适用于您的问题，请注意，如果设置align-items，justify-content则行为相反flex-direction:vertical，默认为flex-direction:row.

随意使用，所有浏览器都支持caniuse.com/#search=flex

还可以查看免费和优秀的课程flexbox.io/他是这方面最好的老师

另请查看css-grid，也是 CSS3 中的新功能

Answer 3

如果您的文本不会大于框的宽度，您可以将 line-height 设置为等于框的高度。

line-height:150px;

Answer 4

我发现的最干净和最一致的方式是这个

display: grid;
place-items: center;

https://jsfiddle.net/j8bktum9/

Answer 5

使用 line-height:150px;和display-inline:block;