How to vertically center a child element of arbitrary size inside a floated parent element (of known size)

Without float

The child element is a line of text in a block-level element (e.g. p)

div.without-float {
 width: 780px; 
 height: 200px;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

<div class="without-float">
 <p>This is a paragraph inside a non-floated <code>div</code>.</p>
</div>

This is a paragraph inside a non-floated div.

The child element is an image (img)

div.without-float {
 width: 780px; 
 height: 200px;
 display: table-cell;
 vertical-align: middle;
}
div.without-float img {
 display: block;
 margin: 0 auto;
}

<div class="without-float">
 <img src="img/sample.jpg" width="77" height="67" alt="A sample image.">
</div>

With float: left;

The child element is a line of text in a block-level element (e.g. p)

div.with-float {
 width: 780px;
 height: 200px;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 float: left;
 line-height: 200px;
}

<div class="with-float">
 <p>Oh hai! I’m a paragraph inside a floated <code>div</code>.</p>
</div>

Oh hai! I’m a paragraph inside a floated div.

The child element is an image (img)

div.with-float {
 width: 780px;
 height: 200px;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 float: left;
 line-height: 200px;
}
div.with-float img {
 vertical-align: middle;
 }

<div class="with-float">
 <img src="img/sample.jpg" width="77" height="67" alt="A sample image.">
</div>