内联块锚标记上的垂直对齐中间答案

【问题标题】：Vertical align middle on an inline-block anchor tag内联块锚标记上的垂直对齐中间
【发布时间】：2020-10-01 12:25:44
【问题描述】：

我需要我的链接和按钮看起来相同，但我无法以与“按钮”标签相同的方式垂直对齐“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 解决方案。

【问题讨论】：

很抱歉让您担心 IE7 :)
在我们网站上的所有 IE 使用中仍占 20%。我发现自己每周都会查看这个数字。 :)

标签： css internet-explorer-7 internet-explorer-6

【解决方案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/

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

【讨论】：

接近将其标记为答案。你能解释一下“显示”设置链吗？
inline 块用于触发 IE7 中的 hasLayout 需要发生它对 mozilla 没有影响。这真的很繁琐，但我们最近已经完成了这个，输入标签需要垂直对齐到中心并在标签过长的地方换行。效果很好。
糟糕！我忘记了 IE7 的表达式。我把它拿走了，因为我认为最好避免表达并让 ie7 对齐顶部，但对你来说可能不是这样。

【解决方案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>

这应该可以解决您的问题，注意如果设置flex-direction:vertical，align-items 和justify-content 将表现相反，默认为flex-direction:row。

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

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

还可以查看css-grid，也是 CSS3 中的新功能

【讨论】：

【解决方案3】：

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

line-height:150px;

【讨论】：

对不起，我应该提到按钮和标签需要能够处理多行文本。我将编辑问题。

【解决方案4】：

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

display: grid;
place-items: center;

https://jsfiddle.net/j8bktum9/

【讨论】：

【解决方案5】：

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

【讨论】：