выравнивания текста с изображением слева в 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 вариантов, это последнее.

Answer 1

vertical-align:middle; 

на верховенстве IMG, кажется, работает:

#newItems img { 
    /*display: block;*/ 
    margin: auto; 
    overflow: hidden; 
    vertical-align:middle; 
} 

jsFiddle example