Html 如何在 <span> 中垂直居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37754621/
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
How to vertically center text in a <span>?
提问by Alex
How can I vertically center text that is wrapped in a <span>? The <span>must have min-heightof 45px. Here is what I am envisioning:
如何垂直居中包裹在 a 中的文本<span>？在<span>必须min-height的45px。这是我的设想：
-------- -------
text
---> text
-------- -------
I tried vertical-alignas well as methods from this article. None of them worked
我尝试了本文中的vertical-align方法。他们都没有工作
回答by Stickers
回答by Mojtaba
While you are using span, you could simply change the display method to table-cell. Remember, if you are going to use div instead of span, you might need to use another way.
在使用 span 时，您可以简单地将显示方法更改为table-cell。请记住，如果您打算使用 div 而不是 span，您可能需要使用另一种方式。
span {
height: 45px;
border: 1px solid #444;
display: table-cell;
vertical-align: middle;
}<span>text</span>回答by Midas
The "old" way to do this, if you need true support for old browsers (that is IE6 & IE7), is to use line-height. This method only allows 1 line of text.
如果您需要真正支持旧浏览器（即 IE6 和 IE7），则执行此操作的“旧”方法是使用line-height. 此方法仅允许 1 行文本。
span {
display: inline-block;
line-height: 100px;
border: 1px solid red;
}<span>vertical center</span>回答by Isma Noor
span{
height: 45px;
display: grid;
align-items: center;
}
回答by Bruno 82
If you need to align your text inside the span element both horizontally and vertically you can also try the inline-grid display.
如果您需要水平和垂直对齐 span 元素内的文本，您还可以尝试使用内联网格显示。
span.verticallycentered{
display: inline-grid;
align-items: center;
text-align: center;
font-size:20px;
min-width:300px;
max-width:300px;
min-height:150px;
margin: 4px;
padding-left: 8px;
padding-right: 8px;
border: 1px solid black;
background-color: silver;
}
<span class='verticallycentered'>vertically and horizontally centered text spanning over more than just one line</span>
回答by Patrick Graham
span is set to display inline and the example you linked to should work with divs that are set to display block. Trying adding display block to your span and then following the advice in the link. Combining them should get it to work. But then, why use a span?
span 设置为内联显示，并且您链接到的示例应该与设置为显示块的 div 一起使用。尝试将显示块添加到您的跨度，然后按照链接中的建议进行操作。将它们结合起来应该可以正常工作。但是，为什么要使用跨度？
回答by Prakash Upadhyay
You can achieve vertical center text alignment by any of the below approaches based upon which browser your application is going to support.
根据您的应用程序将支持的浏览器，您可以通过以下任何一种方法实现垂直居中文本对齐。
<span class="vertical-center">Center Text</span>
<span class="vertical-center">Center Text</span>
1) using display: inline-flex; (if you are targeting mordern browsers like Chrome, safari, IE11 and above you can go with flex) Check: Can I use https://caniuse.com/#search=inline-flex
1）使用显示：inline-flex；（如果你的目标是现代浏览器，如 Chrome、safari、IE11 及更高版本，你可以使用 flex）检查：我可以使用https://caniuse.com/#search=inline-flex
.vertical-center {
display: inline-flex;
border: 1px solid #ddd;
min-height: 100px;
align-items: center;
}
2) Using display: table-cell; (if you are targeting older browsers too like IE9, go with second approach )
2）使用显示：table-cell；（如果您也针对 IE9 之类的旧浏览器，请使用第二种方法）
.vertical-center-table-cell {
display: table-cell;
border: 1px solid #ddd;
height: 100px;
vertical-align: middle;
}
Demo: JSFiddle
演示：JSFiddle
