CSS中間對齊兩個跨度爲圖像

Question

我見過工作的中間對齊文本的單行旁邊的圖像，像這樣的例子權：

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

但我需要對齊跨度，一個在另一個之上，因爲他們最終需要有不同的風格，並且在第二跨度以下結果所呈現下的圖像：

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

NOTE：我用進行了實驗float：left;爲圖像，它在一定程度上工作，但是當文本足夠長以至於它需要div展開（它不影響圖像的寬度並且產生不希望的文本包裝）時失敗

編輯：這是一個爲我工作的解決方案的例子，根據aje給出的答案，包含一個小的調整vertical-align：middle;添加到div標籤。我已經包括這個作爲一個編輯，而不是增加我自己的答案，因爲我想要幫助我的答案信貸AJE：

<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

裹span下低於div是一個片段

<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>