Como alinhar verticalmente algo dentro de uma tag span?

Como faço para que o "x" fique alinhado verticalmente no meio do intervalo?

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

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

Use em line-height:50px;vez de altura. Isso deve fazer o truque;)

Esteja ciente de que a line-heightabordagem falhará se você tiver uma frase longa na spanque quebra a linha porque não há espaço suficiente. Nesse caso, você teria duas linhas com um intervalo com a altura dos N pixels especificados na propriedade

Eu fiquei preso quando queria mostrar uma imagem com texto centralizado verticalmente no lado direito, que funciona em um aplicativo da web responsivo. Como base, uso a abordagem sugerida por Eric Nickus e Felipe Tadeo.

Se você deseja alcançar:

e isto:

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

Essa é a maneira mais simples de fazer isso, se você precisar de várias linhas. Coloque spano texto em outro spane especifique sua altura com line-height. O truque de várias linhas está a repor os interiores spans' 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

Claro que o exterior spanpode ser um divou o que você deve

A maneira flexbox:

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

Eu precisava disso para links, então envolvi o span com uma tag e uma div, e então centralizei o tag 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%;
}

Imagem e texto do centro vertical CSS

Eu tenho criar uma demonstração para o centro de imagem vertical e texto também tenho teste no Firefox, Chrome, Safari, Internet Explorer 9 e 8 também.

É muito curto e fácil css e html. Verifique o código abaixo e você pode encontrar a saída no 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;
    }

Saída, insira a descrição da imagem aqui

isso funciona para mim (Keltex disse o mesmo)

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

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

O atributo css de alinhamento vertical não faz o que você espera, infelizmente. Este artigo explica duas maneiras de alinhar verticalmente um elemento usando css.

Defina padding-top como um valor apropriado para empurrar x para baixo e subtraia o valor que você tem para padding-top da altura.