CSS 内联块锚标记上的垂直对齐中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10437643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical align middle on an inline-block anchor tag
提问by Travis
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).
我需要让我的链接和按钮看起来一样，但我一直无法以与“button”标签相同的方式垂直对齐“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;
}
See the jsfiddle below:
请参阅下面的 jsfiddle：
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.
如您所见，我可以将其与内部的 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;
}
Looking for a simple CSS only solution.
寻找一个简单的 CSS 解决方案。
回答by Gats
The only reliable way to I've found align text vertically and allow wrapping of the text if it gets too long is with a 2 container approach.
我发现垂直对齐文本并允许在文本太长时换行的唯一可靠方法是使用 2 个容器方法。
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");
}
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/
如果您希望所有内容都内联，请在 a 标签上添加浮动。这是 A 标签中带有长文本的更新示例.. http://jsfiddle.net/bZsaw/13/
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.
您可以将跨度上的行高设置为您喜欢的任何值，如果它小于父行高度的一半，如果您的文本超过父容器宽度，它将居中并允许文本换行。据我所知，这适用于所有现代浏览器。
回答by John Balvin Arias
All answers are not updated,and all of them are basically hacks, you should use new CSS3 features, in this case flexbox
所有答案都没有更新，而且基本上都是黑客，你应该使用新的 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>That should work for your problem, note that align-itemsand justify-contentwill behave the opposite if set flex-direction:vertical, default is flex-direction:row.
这应该适用于您的问题，注意align-items和justify-content的行为相反，如果设定的flex-direction:vertical，默认为flex-direction:row。
Feel free to use, all browsers support it caniuse.com/#search=flex
随意使用，所有浏览器都支持caniuse.com/#search=flex
Also check out the free and excellent course flexbox.io/he is the best teacher at this
还可以查看免费的优秀课程flexbox.io/他是这方面最好的老师
Also check out css-grid, also new in CSS3
另请查看css-grid，也是 CSS3 中的新内容
回答by Jrod
If your text won't be larger than the width of the box you could set the line-height equal to the height of the box.
如果您的文本不会大于框的宽度，您可以将行高设置为等于框的高度。
line-height:150px;
line-height:150px;
回答by kuldeep singh
Useline-height:150px;and display-inline:block;
使用line-height:150px;和display-inline:block;
