htmlcss

How to vertically center text in a <span>?

How can I vertically center text that is wrapped in a <span>? The <span> must have min-height of 45px. Here is what I am envisioning:

--------                  -------
text

                --->      text   


--------                  -------

I tried vertical-align as well as methods from this article. None of them worked

Solution

  • Try using flexbox, all modern browsers support it, with prefixes it also works in IE10.

    span {
  min-height: 100px;
  display: inline-flex;
  align-items: center;
  border: 1px solid aqua;
}
    <span>vertical center</span>