title: Vertically center <span> text which is beside a much larger <span>, both inside a <div>
body: <p>I am trying to vertically center some text in a <code>&lt;span&gt;</code> element, in relation to a much larger <code>&lt;span&gt;</code> that is a sibling of the first one. Both are children of a containing parent <code>&lt;div&gt;</code> element.</p>
  
  <h3>HTML:</h3>
  
  <pre><code>&lt;div&gt;
      &lt;span class="previewLabel"&gt;Preview:&lt;/span&gt;
      &lt;span class="previewText"&gt;The quick brown fox jumps over the lazy dog.&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS:</h3>
  
  <pre><code>.previewLabel {
      display: inline-block;
      line-height: 100%;
      vertical-align: middle;
  }
  
  .previewText {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 64px;
      font-style: italic;
      font-weight: bold;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/5chXG/" rel="nofollow noreferrer">http://jsfiddle.net/5chXG/</a></p>
  
  <p>As you can see, I already tried the <code>vertical-align</code> trick (with the <code>line-height</code> defined) that is described in <a href="https://stackoverflow.com/q/9249359/346561">this Q&amp;A ("Text vertical align in a div")</a> but it doesn't seem to work. I think the difference is that I can't use a static <code>line-height</code> value.</p>
  
  <p>I can't use a <code>px</code> value for the <code>line-height</code> property because the <code>.previewText</code> span can change sizes dynamically. In the real code, there are controls on the page to change the font properties and JavaScript will adjust the CSS of the <code>.previewText</code> while you change things.</p>
  
  <h3>My Question:</h3>
  
  <p>How can make the "Preview:" text (<code>.previewLabel</code>) <code>&lt;span&gt;</code> be vertically aligned in the middle of the parent <code>&lt;div&gt;</code> element?</p>
  
  <h3>Edit / Clarification</h3>
  
  <p>I would like <em>ALL</em> of the text to behave as a single line of text normally would.</p>
  
  <ul>
  <li>Wrapping should cause the big text to flow under the smaller text.</li>
  <li>The smaller text should only be vertically aligned within the height of a single line of larger text, not multiple lines</li>
  </ul>
  
  <p>Here is a visualization of what I am trying to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/3e9WC.jpg" alt="enter image description here"></p>