Comment puis-je alignez verticalement quelque chose à l'intérieur d'une balise span?

Question

Comment puis-je obtenir le "x" pour être verticalement alignées dans le milieu de la durée?

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

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

Answer 1

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

Answer 2

Sachez que la hauteur de la ligne ne parvient pas, si vous avez une longue phrase en l'espace qui rompt la ligne car il n'y a pas assez d'espace. Dans ce cas, vous disposez de deux lignes, avec un écart avec la hauteur de la N de pixels spécifié dans la propriété.

J'ai collé dedans quand j'ai voulu montrer une image avec un texte centré verticalement sur son côté droit, qui travaille dans un responsive web de l'application. Comme base, j'utilise l'approche proposée par Eric Nickus et Felipe Tadeo. Si vous souhaitez obtenir:

et:

C'est le CSS:

.container {
    background: url( "<PATH_TO_IMAGE>" ) 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;
}

Et c'est le HTML:

<span class="container">
    <span>This is a centered sentence next to an image</span>
</span>

Démo

Answer 3

C'est la façon la plus simple de le faire si vous avez besoin de plusieurs lignes. Vous envelopper span'd texte dans un autre span et de préciser sa hauteur avec line-height. L'astuce pour 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*/
}

DÉMO

Bien sûr que l'extérieur de la span pourrait être un div ou whathaveyou

Answer 4

J'avais besoin de cela pour les liens, donc j'ai enveloppé la durée avec un tag et un div, alors centrée sur la balise span lui-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%;
}

Answer 5

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

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

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