title: How to vertically center a child element of arbitrary size inside a floated parent element (of known size)?
body: <p>How to vertically center a child element <em>of arbitrary size</em> inside a <em>floated</em> parent element (of known size)?</p>
  
  <p><code>display: table-cell; vertical-align: middle;</code> no longer seems to work when the element is floated.</p>
  
  <p><strong>I created an SSCCE here: <a href="http://mathiasbynens.be/demo/center-vertically-inside-float" rel="nofollow noreferrer">http://mathiasbynens.be/demo/center-vertically-inside-float</a></strong></p>
  
  <p><a href="http://mathiasbynens.be/demo/center-vertically-inside-float#without-float" rel="nofollow noreferrer">Without float</a>, everything works as it should. But <a href="http://mathiasbynens.be/demo/center-vertically-inside-float#with-float" rel="nofollow noreferrer">as soon as the parent element is floated</a>, the vertical alignment fails.</p>
  
  <p>Any ideas how to work around this?</p>
  
  <p><strong>Edit:</strong> I should’ve added that the child elements are supposed to be images. In my example page I’m using paragraphs, since I assumed I could apply whatever CSS those <code>p</code> elements needed to <code>img</code> elements with <code>display: block;</code> as well. (Fail.)</p>