Html 如何垂直对齐跨度标签内的某些内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/732337/
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 do I vertically align something inside a span tag?
提问by mike
How do I get the "x" to be vertically-aligned in the middle of the span?
如何让“x”在跨度中间垂直对齐？
.foo {
height: 50px;
border: solid black 1px;
display: inline-block;
vertical-align: middle;
}
<span class="foo">
x
</span>
回答by Sindre Sorhus
Use line-height:50px;instead of height. That should do the trick ;)
使用line-height:50px;而不是高度。这应该够了吧 ;）
回答by lluisaznar
Be aware that the line-heightapproach fails if you have a long sentence in the spanwhich breaks the line because there's not enough space. In this case, you would have two lines with a gap with the height of the N pixels specified in the property.
请注意，line-height如果您有一个很长的句子，span因为没有足够的空间而断行，则该方法会失败。在这种情况下，您将有两条线与属性中指定的 N 个像素的高度有间隙。
I stuck into it when I wanted to show an image with vertically centered text on its right side which works in a responsive web application. As a base I use the approach suggested by Eric Nickus and Felipe Tadeo.
当我想在右侧显示垂直居中文本的图像时，我坚持使用它，该图像适用于响应式 Web 应用程序。作为基础，我使用 Eric Nickus 和 Felipe Tadeo 建议的方法。
If you want to achieve:
如果你想实现：
and this:
和这个：
.container {
background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;
display: inline-block;
background-size: 40px 40px; /* image's size */
height: 40px; /* image's height */
padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}
.container span {
height: 40px; /* image's height */
display: table-cell;
vertical-align: middle;
}<span class="container">
<span>This is a centered sentence next to an image</span>
</span>回答by Hashbrown
This is the simplest way to do it if you need multiple lines. Wrap you span'd text in another spanand specify its height with line-height. The trick to multiple lines is resetting the inner span's line-height.
如果您需要多行，这是最简单的方法。将您span的文本包裹在另一个中，span并用 指定其高度line-height。多行的技巧是重置内部span的line-height.
<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>
.textvalignmiddle {
line-height: /*set height*/;
}
.textvalignmiddle > span {
display: inline-block;
vertical-align: middle;
line-height: 1em; /*set line height back to normal*/
}
Of course the outer spancould be a divor whathaveyou
当然，外部span可以是 adiv或 whathaveyou
回答by Chris Clower
The flexbox way:
弹性盒方式：
.foo {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
回答by Jason
I needed this for links, so I wrapped the span with an a-tag and a div, then centered the span tag itself
我需要这个链接，所以我用 a-tag 和 div 包裹了 span，然后将 span 标签本身居中
HTML
HTML
<div>
<a class="tester" href="#">
<span>Home</span>
</a>
</div>
CSS
CSS
.tester{
display: inline-block;
width: 9em;
height: 3em;
text-align: center;
}
.tester>span{
position: relative;
top: 25%;
}
回答by Jason
CSS vertical center image and text
CSS 垂直居中图像和文本
I have Create one demo for vertical image center and text also i have test on firefox ,chrome,safari, internet explorer 9 and 8 too.
我为垂直图像中心和文本创建了一个演示，我也对 firefox、chrome、safari、internet explorer 9 和 8 进行了测试。
It is very short and easy css and html, Please check below code and you can find output on screenshort.
这是非常简短的 css 和 html，请检查下面的代码，您可以在 screenshort 上找到输出。
HTML
HTML
<div class="frame">
<img src="capabilities_icon1.png" alt="" />
</div>
CSS
CSS
.frame {
height: 160px;
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content:"";
}
img {
background: #3A6F9A;
vertical-align: middle;
}
回答by Philll_t
this works for me (Keltex said the same)
这对我有用（Keltex 也这么说）
.foo {
height: 50px;
...
}
.foo span{
vertical-align: middle;
}
<span class="foo"> <span>middle!</span></span>
回答by Keltex
The vertical-align css attribute doesn't do what you expect unfortunately. This articleexplains 2 ways to vertically align an element using css.
不幸的是， vertical-align css 属性没有达到您的预期。本文解释了使用 css 垂直对齐元素的两种方法。
回答by wheresrhys
Set padding-top to be an appropriate value to push the x down, then subtract the value you have for padding-top from the height.
将 padding-top 设置为适当的值以将 x 向下推，然后从高度中减去 padding-top 的值。
