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

将文本与图像对齐到css3中的左侧

1 个答案: