Vertically centered child element within header element on same line

Question

I'm trying to do something simple. I'm trying to have a header tag, that has a child tag with a smaller font size, that is centered vertically, within that header element. I'm not quite sure how to achieve this.

<h2>BIG TITLE: <span>subtitle</span></h2>

Answer 1

Use vertical-align

h2 span{
  vertical-align: middle; /* you can also use px... */
  font-size: 10px;
}

<h2>BIG TITLE: <span>subtitle</span></h2>

or pick any other desired value from https://developer.mozilla.org/en/docs/Web/CSS/vertical-align