垂直对齐在内嵌块锚定标签的中间 [英] Vertical align middle on an inline-block anchor tag

问题描述

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

I have a need for my links and buttons to look the same, but I've been unable to vertically align the text within an "a" tag in the same manner as the "button" tag. It is important to note that the tags need to be able to handle multiple lines of text (so line-height will not work).

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：

See the jsfiddle below:

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

正如你所看到的，我可以使用一个span标签内部和设置display：table到a和设置display：table-cell vertical-align：middle到span，但是在IE7中不起作用。

As you can see, I can get it to work with a combination of a span tag inside and setting "display:table" to the "a" and setting "display:table-cell" and "vertical-align:middle" to the span, but that doesn't work in 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解决方案。

Looking for a simple CSS only solution.

外部容器的行高应至少为内部容器指定的行高的两倍。在你的情况下，这意味着：

The outer container should have a line height of at least double that specified for the inner container. In your case, that means the following:

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/

Add float left on the a tag if you want everything inline. Here's the updated example with long text in the A tag too.. http://jsfiddle.net/bZsaw/13/

您可以将span上的行高设置为任何您喜欢的值，如果它小于父级的行高的一半，如果文本超出父容器宽度，则允许文本换行。这项功能适用于所有现代浏览器，就我所知。

You can set the line height on the span to whatever you like and if it is less than half of the line height of the parent, it will center AND allow text wrapping if your text exceeds the parent container width. This works on all modern browsers as far as I know.

这篇关于垂直对齐在内嵌块锚定标签的中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！