CSS Mitte ausrichten zwei Spannen nach rechts eines Bildes

Question

I Beispiele für Mittel Ausrichten einer einzigen Textzeile arbeiten neben einem Bild gesehen haben, etwa so:

<div> 
    <img style="vertical-align:middle" src="testImage.png" /> 
    <span style="">This works</span> 
</div> 

Aber ich brauche ausrichten zwei Spannweiten, eine über der anderen, denn sie werden schließlich verschiedene Stile, und die folgenden Ergebnisse in der zweiten Spanne haben müssen wird unter das Bild gemacht:

<div> 
    <img style="vertical-align:middle;" src="testImage.png" /> 
    <span>This doesn't work</span><br /> 
    <span>I'm annoyed</span> 
</div> 

HINWEIS: Ich experimentierte mit float: links; für das Bild, die zu einem gewissen Grad funktioniert, aber fehlschlägt, wenn der Text lang genug ist, dass das div erweitert werden muss (es berücksichtigt nicht die Breite des Bildes und erzeugt einen unerwünschten Textumbruch)

EDIT: Dies ist ein Beispiel für die Lösung, die für mich arbeitete, basierend auf der Antwort von Aje, mit einem kleinen Tweak des Hinzufügens vertical-align: Mitte; zum div-Tag. Ich habe dies als bearbeiten enthalten, und nicht meine eigene Antwort hinzufügen, weil Ich mag würde aje mit der Antwort auf eine Gutschrift, die mir geholfen:

<div style="border: solid 2px green;"> 
    <img style="border: solid 2px black; vertical-align: middle; width: 32px; height: 32px;" src="https://dummyimage.com/300.png/09f/fff" /> 
    <div style="vertical-align: middle; display: inline-block"> 
     <span>This now works properly.</span><br /> 
     <span>Thanks for the help!</span> 
    </div> 
</div> 

Answer 1

Wrap span unter ein div unten ist ein Ausschnitt

<div> 
 
    <img style="vertical-align:middle;" src="https://dummyimage.com/300.png/09f/fff" /> 
 
    <div style="display:inline-block"><span>This doesn't work</span><br /> 
 
    <span>I'm annoyed</span> 
 
    </div> 
 
</div>

Answer 2

div { 
 
    display:table; 
 
} 
 

 
div img { 
 
    float:left; 
 
    margin-right: 10px; 
 
    width: 200px; 
 
} 
 

 
div p { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 

 
div span { 
 
    display: block; 
 
} 
 

 
div:after { /* it's always good practice to clear floats */ 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
}

<div> 
 
    <img style="vertical-align:middle;" src="http://lorempixel.com/output/animals-q-c-640-480-8.jpg" /> 
 
    <p> 
 
     <span>This doesn't work</span> 
 
     <span>I'm annoyed</span> 
 
    </p> 
 
</div>