Come allineare verticalmente qualcosa all'interno di un tag span?

Come posso ottenere la "x" per essere allineata verticalmente nel mezzo dell'intervallo?

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

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

Usa line-height:50px;invece di altezza. Questo dovrebbe fare il trucco;)

Tieni presente che l' line-heightapproccio fallisce se hai una frase lunga nella spanquale si interrompe la linea perché non c'è abbastanza spazio. In questo caso, avresti due linee con uno spazio con l'altezza degli N pixel specificati nella proprietà.

Mi ci sono bloccato quando volevo mostrare un'immagine con testo centrato verticalmente sul lato destro che funziona in un'applicazione web reattiva. Come base utilizzo l'approccio suggerito da Eric Nickus e Felipe Tadeo.

Se vuoi raggiungere:

e questo:

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

Questo è il modo più semplice per farlo se hai bisogno di più linee. Avvolgi il spantesto in un altro spane specificane l'altezza con line-height. Il trucco per più linee è il reset del interiori 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

Naturalmente l'esterno spanpotrebbe essere un divo cosa

Il modo flexbox:

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

Ne avevo bisogno per i collegamenti, quindi ho spostato lo span con un a-tag e un div, quindi ho centrato il tag span stesso

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

Immagine e testo al centro verticale CSS

Ho creato una demo per il centro dell'immagine verticale e il testo e ho anche test su Firefox, Chrome, Safari, Internet Explorer 9 e 8.

È CSS e HTML molto brevi e facili, si prega di controllare il codice qui sotto e puoi trovare l'output su 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;
    }

Uscita inserisci qui la descrizione dell'immagine

questo funziona per me (Keltex ha detto lo stesso)

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

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

L'attributo css vertical-align non fa purtroppo quello che ti aspetti. Questo articolo spiega 2 modi per allineare verticalmente un elemento usando css.

Imposta padding-top su un valore appropriato per spingere la x verso il basso, quindi sottrai il valore che hai per padding-top dall'altezza.