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;
    vertical-align: middle;
}

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

Answer 1

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