span タグ内で何かを垂直に揃えるにはどうすればいいですか? 質問する

「x」をスパンの中央に垂直に揃えるにはどうすればよいでしょうか?

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

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