如何垂直alignmentspan标签内的东西？
如何让“x”在跨度中间垂直alignment？
.foo { height: 50px; border: solid black 1px; display: inline-block; vertical-align: middle; } <span class="foo"> x </span> 使用line-height:50px; 而不是身高。 这应该够了吧 ;）
请注意，如果由于没有足够的空间而导致分隔线上的长句子，则line-height方法将失败。 在这种情况下，您将有两条线与属性中指定的N个像素的高度有间隙。
当我想要在响应式Web应用程序的右侧显示垂直居中文本的图像时，我陷入了困境。 作为一个基地，我使用了由Eric Nickus和Felipe Tadeobuild议的方法。
如果你想实现：
和这个：
.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>
如果你需要多行，这是最简单的方法。 用另一个span把'd'文本换line-height并用line-height指定它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*/ }
DEMO
当然，外部span可能是一个div或者什么haveyou。
我需要这个链接，所以我用一个a-tag和一个div来包装span，然后集中span标签本身
HTML
<div> <a class="tester" href="#"> <span>Home</span> </a> </div>
CSS
.tester{ display: inline-block; width: 9em; height: 3em; text-align: center; } .tester>span{ position: relative; top: 25%; }
CSS垂直中心的图像和文字
我已经创build了一个垂直图像中心和文本的演示，我也testing了Firefox，Chrome，Safari，Internet Explorer 9和8。
这是非常简短的CSS和HTML，请检查下面的代码，你可以在屏幕上find输出。
HTML
<div class="frame"> <img src="capabilities_icon1.png" alt="" /> </div>
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; }
输出 在这里input图像说明
这对我有用（Keltex说的一样）
.foo { height: 50px; ... } .foo span{ vertical-align: middle; } <span class="foo"> <span>middle!</span></span>
垂直alignment的CSS属性不会做你期望的不幸的。 本文介绍了使用css垂直alignment元素的两种方法。
将padding-top设置为合适的值，将x向下推，然后从高度中减去padding-top的值。
