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

EDIT: see http://stackoverflow.com/questions/527811/css-vertical-centering

Snarky answer: Use a table.

The fact is that vertical alignment is shamefully difficult to accomplish using css. First of all, the vertical-align property doesn't work the way your intuition probably tells you that it should. If the details of how to use the vertical-align property interest you, you will find a wealth of information at your nearest google.

There are some css-based techniques which will accomplish vertical centering. Almost all of them require that you specify a fixed height for span.foo. See: Understanding vertical-align, or "How (Not) To Vertically Center Content"

Answer 2

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

Answer 3

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

Answer 4

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.