¿Cómo alineo verticalmente algo dentro de una etiqueta span?

¿Cómo consigo que la "x" se alinee verticalmente en el medio del tramo?

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

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

Usar en line-height:50px;lugar de altura. Eso debería hacer el truco ;)

Tenga en cuenta que el line-heightenfoque falla si tiene una oración larga en la spanque se rompe la línea porque no hay suficiente espacio. En este caso, tendría dos líneas con un espacio con la altura de los N píxeles especificados en la propiedad.

Me atasqué cuando quería mostrar una imagen con texto centrado verticalmente en su lado derecho que funciona en una aplicación web receptiva. Como base utilizo el enfoque sugerido por Eric Nickus y Felipe Tadeo.

Si quieres lograr:

y esto:

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

Esta es la forma más sencilla de hacerlo si necesita varias líneas. Envuelva spanel texto en otro spany especifique su altura con line-height. El truco para múltiples líneas está restableciendo los interiores span's 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*/
}

MANIFESTACIÓN

Por supuesto, el exterior spanpodría ser un divo qué

La forma flexbox:

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

Necesitaba esto para los enlaces, así que envolví el lapso con una etiqueta a y un div, luego centré la etiqueta del tramo en sí

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

Imagen y texto de centro vertical CSS

Tengo Create one demo for vertical image center and text también tengo prueba en firefox, chrome, safari, internet explorer 9 y 8 también.

Es muy corto y fácil css y html, verifique el código a continuación y puede encontrar la salida en screenhort.

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

Salida ingrese la descripción de la imagen aquí

esto funciona para mí (Keltex dijo lo mismo)

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

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

El atributo css de alineación vertical no hace lo que espera desafortunadamente. Este artículo explica 2 formas de alinear verticalmente un elemento usando css.

Establezca padding-top como un valor apropiado para empujar la x hacia abajo, luego reste el valor que tiene para padding-top de la altura.