[html] How do I vertically align something inside a span tag?

How do I get the "x" to be vertically-aligned in the middle of the span?

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

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

CSS vertical center image and text

I have Create one demo for vertical image center and text also i have test on firefox ,chrome,safari, internet explorer 9 and 8 too.

It is very short and easy css and html, Please check below code and you can find output on 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;
    }

Output enter image description here

The flexbox way:

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

Set padding-top to be an appropriate value to push the x down, then subtract the value you have for padding-top from the height.

this works for me (Keltex said the same)

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

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

Be aware that the line-height approach fails if you have a long sentence in the span which breaks the line because there's not enough space. In this case, you would have two lines with a gap with the height of the N pixels specified in the property.

I stuck into it when I wanted to show an image with vertically centered text on its right side which works in a responsive web application. As a base I use the approach suggested by Eric Nickus and Felipe Tadeo.

If you want to achieve:

and this:

.container {_x000D_
    background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;_x000D_
    display: inline-block;_x000D_
    background-size: 40px 40px; /* image's size */_x000D_
    height: 40px; /* image's height */_x000D_
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */_x000D_
}_x000D_
_x000D_
.container span {_x000D_
    height: 40px; /* image's height */_x000D_
    display: table-cell;_x000D_
    vertical-align: middle;_x000D_
}

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

I needed this for links, so I wrapped the span with an a-tag and a div, then centered the span tag itself

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

This is the simplest way to do it if you need multiple lines. Wrap you span'd text in another span and specify its height with line-height. The trick to multiple lines is resetting the inner 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*/
}

DEMO

Of course the outer span could be a div or whathaveyou

The vertical-align css attribute doesn't do what you expect unfortunately. This article explains 2 ways to vertically align an element using css.

Use line-height:50px; instead of height. That should do the trick ;)