How do I vertically align something inside a span tag?

Question

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;
          


        

Answer 1

this works for me (Keltex said the same)

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

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

Answer 2

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

Answer 3

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