Multi-line vertical text centering next to an image

Question

With the code below (and several other variations I've tried), when I shrink the browser window and my text becomes multi-lined, the next lines always falls below the image I have to the left of the text. How can I keep the resulting multi-line text vertically aligned next to the image? I've noticed plenty of solutions for single line text next to an image but haven't seen any for multi-line text.

<div id="printnotice" style="float:left;margin-top:5px;margin-bottom:10px;width:95%;text-align:center;">
    <div style="float:left;margin:auto;display:block;">     
        <img style="align:left;vertical-align:middle;" alt="STOP" src="/Portal Content/Home/Stop">
        <span style="margin-left:20px;font-family:Calibri;font-size:1.5em;">Required: Print Registration Information and Support Options and give to customer</span>
    </div>

</div>

Answer 1

Demo

You can do that floating the image and adding overflow: hidden to the text wrapper:

#printnotice img {
    float: left;
}
#printnotice span {
    overflow: hidden;
    display: block;
}

Answer 2

If you need the text on the right to be verticaly align next to the image, you can use display:table; and display:table-cell;

See this FIDDLE

HTML :

<div id="printnotice">
    <div>
        <span><img alt="STOP" src="http://lorempixel.com/output/food-h-g-198-256-8.jpg" /></span>
        <span>Required: Print Registration Information and Support Options and give to customer</span>
    </div>
</div>

CSS :

#printnotice {
    float:left;
    margin-top:5px;
    margin-bottom:10px;
    width:95%;
    text-align:center;
}
#printnotice div {
    float:left;
    margin:auto;
    display:table;
}
#printnotice span {
    display:table-cell;
    vertical-align:middle;
    margin-left:20px;
    font-family:Calibri;
    font-size:1.5em;
}