css - css3でテキストと画像を左に揃える

Question

次のマークアップが与えられた場合

<div id="newItems" class="literaltext" >
    <p> <asp:Image runat="server" ImageUrl="~/Images/32x32.png"  
                   ClientIDMode="Static" />&nbsp;&nbsp; Click
                        <a href="Shareholder Letter Jan 2013_Final.pdf" >here</a> 
                        to read our President's letter to shareholder's for 2013
    </p>
    <br />
    <p> <asp:Image runat="server" ImageUrl="~/Images/32x32.png"  
                   ClientIDMode="Static" />&nbsp;&nbsp;<span >Click
                        <a href="Calc.aspx" >here</a> 
                        to run our <strong>Return on Investment Calculator</strong> to see how the economics of using <span class="green"><b>EnerBurn&reg;</b></span> can work for your fleet.</span>
    </p>
    <br />
    <asp:Literal ID="LiteralWelcome"  runat="server"></asp:Literal>
</div>

および次の css;

#newItems {
display: inline-block;

}
#newItems img {
    /*display: block;*/
    margin: auto;
    overflow: hidden;
}
#newItems span {
    vertical-align: middle;
    text-align: center;
    margin-top: 0;
    padding-top: 0;
}

画像の右側にあるテキストを画像と揃えることができません。画像は常にテキストよりもはるかに高く表示されます。p タグの高さの真ん中にテキストを垂直に揃えることができれば、少なくともほぼ正しく見えるでしょう。50種類ほど試しましたが、これが最新です。