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

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"设置为span,但这在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

所有答案都没有更新,而且所有答案都基本上都是黑客攻击,你应该使用新的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网,也有新的CSS3

Answer 3

如果您的文本不会大于框的宽度,则可以将行高设置为等于框的高度.

line-height:150px;