title: Text with different sizes on same line, how to align smaller text horizontally central with bigger text?
body: <p><a href="https://i.stack.imgur.com/Afh3T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Afh3T.png" alt="enter image description here"></a></p>
  
  <p>As demonstrated in the above image (please take no notice of the fact the Dasboard text is abhorrently large - I only made it that size for this example), I want the text that says "Admin Control Panel" to be aligned horizontally middle with where the Dashboard text is, online with the red arrow. </p>
  
  <p>The code I have for both these pieces of text are:</p>
  
  <pre><code>&lt;div id="content-breadcrumb"&gt;
    Admin Control Panel &amp;raquo;
      &lt;span id="active"&gt;
        Dashboard
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS code is:</p>
  
  <pre><code>#content-breadcrumb {
    font-family: 'Varela Round', sans-serif
    font-size: 16px;
  }
  
  #content-breadcrumb #active {
    font-size: 200px;
    color: #4F95C4;
  }
  </code></pre>
  
  <p>Note that I have tried using vertical align and setting line height to no avail. Thanks for any help that you can offer!</p>