Question

我需要链接和按钮看起来一样，但是我无法以“按钮”标签的方式垂直对齐“a”标签内的文本。重要的是要注意标签需要能够处理多行文本（因此行高不起作用）。

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

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

Answer 2

如果您的文字不会大于框的宽度，您可以将行高设置为等于框的高度。

line-height:150px;

Answer 3

所有答案都没有更新，而且所有答案都基本上都是黑客攻击，你应该使用新的CSS3功能，在这种情况下flexbox

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

同时查看免费且优秀的课程flexbox.io/他是本课程中最好的老师

同时查看css-grid，也是CSS3中的新内容

Answer 4

我发现的最干净，最一致的方法是

display: grid;
place-items: center;

https://jsfiddle.net/j8bktum9/

Answer 5

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

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

5 个答案: