Comment aligner verticalement quelque chose à l'intérieur d'une balise span?

Comment faire pour que le "x" soit aligné verticalement au milieu de la travée?

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

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

Utilisez line-height:50px;au lieu de la hauteur. Cela devrait faire l'affaire ;)

Sachez que l' line-heightapproche échoue si vous avez une longue phrase dans le spanqui rompt la ligne car il n'y a pas assez d'espace. Dans ce cas, vous auriez deux lignes avec un espace avec la hauteur des N pixels spécifiés dans la propriété.

Je suis resté dedans lorsque je voulais montrer une image avec du texte centré verticalement sur son côté droit qui fonctionne dans une application Web réactive. Comme base, j'utilise l'approche suggérée par Eric Nickus et Felipe Tadeo.

Si vous souhaitez atteindre:

et ça:

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

C'est le moyen le plus simple de le faire si vous avez besoin de plusieurs lignes. Enveloppez votre spantexte dans un autre spanet spécifiez sa hauteur avec line-height. Le tour à plusieurs lignes est la réinitialisation de l'intérieur 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

Bien sûr, l'extérieur spanpourrait être un divou quoi

La manière flexbox:

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

J'en avais besoin pour les liens, j'ai donc enveloppé le span avec une balise a et un div, puis centré la balise span elle-même

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

Texte et image centrale verticale CSS

J'ai Créer une démo pour le centre d'image vertical et le texte.J'ai également testé sur Firefox, Chrome, Safari, Internet Explorer 9 et 8 aussi.

C'est très court et facile css et html, veuillez vérifier le code ci-dessous et vous pouvez trouver la sortie sur 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;
    }

Sortie entrez la description de l'image ici

cela fonctionne pour moi (Keltex a dit la même chose)

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

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

L'attribut css vertical-align ne fait malheureusement pas ce que vous attendez. Cet article explique 2 façons d'aligner verticalement un élément à l'aide de css.

Définissez padding-top comme une valeur appropriée pour pousser le x vers le bas, puis soustrayez la valeur que vous avez pour padding-top de la hauteur.