如何在span标签内垂直对齐某些内容？

Question

如何让“x”在跨度的中间垂直对齐？

.foo {
    height: 50px;
    border: solid black 1px;
    display: inline-block;
    vertical-align: middle;
}

<span class="foo">
   x
</span>

Answer 1

使用line-height:50px;代替身高。这应该可以解决问题;）

Answer 2

请注意，如果line-height中有一个较长的句子，因为没有足够的空间而导致该行中断，span方法会失败。在这种情况下，您将有两条线，其间隙与属性中指定的N像素的高度相同。

当我想要在其右侧显示带有垂直居中文本的图像时，我坚持使用它在响应式Web应用程序中工作。作为基础，我使用Eric Nickus和Felipe Tadeo建议的方法。

如果你想实现：

和此：

.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>

Answer 3

如果您需要多行，这是最简单的方法。将span'文字换成另一个span并用line-height指定其高度。多行的技巧是重置内部span的{​​{1}}。

line-height

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

DEMO

当然外部.textvalignmiddle { line-height: /*set height*/; } .textvalignmiddle > span { display: inline-block; vertical-align: middle; line-height: 1em; /*set line height back to normal*/ } 可以是span或whathaveyou

Answer 4

flexbox方式：

.foo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

Answer 5

我需要这个链接，所以我用一个标签和一个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%;
}

Answer 6

CSS垂直中心图片和文字

我为垂直图像中心和文本创建了一个演示，我也测试了firefox，chrome，safari，Internet Explorer 9和8。

这是非常简短的css和html，请检查下面的代码，你可以在screenshort上找到输出。

<强> 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;
    }

<强>输出 enter image description here

Answer 7

这适合我（Keltex说同样的）

.foo {
height: 50px;
...
}
.foo span{
vertical-align: middle; 
}

<span class="foo"> <span>middle!</span></span>

Answer 8

不幸的是，vertical-align css属性没有达到预期效果。 This article解释了使用css垂直对齐元素的两种方法。

Answer 9

将padding-top设置为适当的值以向下推x，然后从高度中减去padding-top所具有的值。