title: Vertically centered text in a dynamic height wrapper
body: <p>I'd normally just use line-height for vertical centering, but on this occasion the layout I'm working to is a little trickier.</p>
  
  <p>I've put together this jsfiddle to show where I'm at so far. All the CSS hacks suggest using table-cell trickery for this but I can only get it to work if the wrapper has an absolute height, so for me this text isn't vertically centered:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;a href="#"&gt;
          &lt;img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" /&gt;
          &lt;span class="text"&gt;&lt;span&gt;Text that might span multiple lines&lt;/span&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/fdtbvmcw/" rel="nofollow noreferrer">https://jsfiddle.net/fdtbvmcw/</a></p>
  
  <p>What I basically need is for the text, regardless of how many lines it spans, to sit in the middle of the image. The image can't be a background-image and I can't attach fixed widths or heights to the wrapper.</p>
  
  <p>The wrapper is simulating a responsive column within a bigger page template and I need the image to retain full width of that column you see. Other HTML can be added within the column if need be.</p>
  
  <p>Thoughts?</p>