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;
Use line-height:50px; instead of height. That should do the trick ;)
line-height:50px;