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 种变体，这是最新的。

Answer 1

vertical-align:middle;

img 规则似乎有效:

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

jsFiddle example