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


   x

user_64949 · Answer

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

user_1566928 · Answer

The flexbox way:

.foo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

user_5580783 · Answer

Just giving an alternative, in case you encapsulate your element in a flexible container (e.g.: display: flex):

align-self: center;

Keltex_28260 · Answer

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

user_87739 · Answer

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.