title: CSS - Vertical align text in absolute positioned paragraph
body: <p>Before we start:<br>
  Please don't close this as a duplicate of another question. I just searched here on Stackoverflow without finding that exact case.  </p>
  
  <p>The closest is I believe <a href="https://stackoverflow.com/questions/5219324/vertical-align-img-and-text-inside-p">this question</a>. Still, the replies given there don't really work for me, I believe because the paragraph is set <code>position: absolute;</code>.</p>
  
  <p>Thats the HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;img src="http://www.placehold.it/300x200" /&gt;&lt;p&gt;&lt;span&gt;Lorem Ipsum&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>li {
    position: relative;
    float: left;
    overflow: hidden;
  }
  
  img {
    width: 100%;
    vertical-align: middle;
  }
  
  p {
    background-color: rgba(255, 0, 0, .3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  span {
      background-color: rgba(0, 255, 0, .3);
      vertical-align: middle;
  }
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/DpVjZ/" rel="nofollow noreferrer">http://jsfiddle.net/DpVjZ/</a></p>
  
  <p><code>vertical-align: middle;</code> just bumps the text a tiny bit away from the top, but not really in the middle.<br>
  Setting the span <code>position: absolute;</code> and then applying <code>top: 50%;</code> and then <code>margin-top: -x%;</code> won't work because the height of the span is not known as it is dynamic content.<br>
  Although the linked question states that this is bad practice, I also tried the <code>display: table-cell</code> approach without any result. Please help me.</p>