How to make text vertical-align in a span

When you show an image and a text you may want to vertically align the text in middle in a span tag. Even you have a long sentence.

Codes as the following:

<div>
<img src="https://www.waytowp.com/wp-content/uploads/2014/03/display-text-on-image-demo.jpg" alt="display-text-on-image-demo" width="292" height="178" style="float:left;"/>
<span style="line-height:178px;display:inline-block;float:left;">Vertically align middle</span>
</div>

The key of this demo is it uses a line-height to the span and set it the same as the images.

Codes as the following:

<div>
<img src="https://www.waytowp.com/wp-content/uploads/2014/03/display-text-on-image-demo.jpg" alt="display-text-on-image-demo" width="292" height="178" style="float:left;display:inline-block;"/><span style="width:200px;height:178px;display:table-cell;vertical-align:middle;">Vertically align middle but have a long sentence in the span which breaks the line because there's not enough space.</span>
</div>

The key of this demo is it uses a display:table-cell; and vertical-align: middle; and the height of the span set to same as the images.