Question

我一直在关注我在网上发现的每一个提示，但是...我还没有让它发挥作用：（

这是我的CSS的一部分：

#content-container {
    float: left;
    width: 900px;
    background: #fff url(../images/asideBkg.gif) repeat-y 100% 0; /*Aside background image*/
}

#content {
    clear: left;
    float: left;
    width: 560px;
    padding: 20px 0;
    margin: 0 0 0 30px;
    display: inline;
}

#content img {
    float: left;
    margin: 4px;
}

#content p {
    color: #000000;
    font-size: 14px;
    font-family: helvetica;
    text-align: left;
}

#content h2 { margin: 0; }

#aside {
    float: right;
    width: 240px;
    padding: 20px 0;
    margin: 0 20px 0 0;
    display: inline;    
}

#aside h3 { margin: 0; }

我有一个母版页，我的内容占位符只是内容div（而不是旁边），现在html是我们跟随：

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="content">
    <h3>
        Contact us
    </h3>
    <hr />
    <p>&nbsp;</p>      
    <img src="images/mail32x32.png" alt="Mail" />    
    <p>
        Drop us an email at: <a href="mailto:#@#">#@#</a>
    </p>
    <p>&nbsp;</p>
    <img src="images/phones32x32.png" alt="Phone" />
    <p>
        or give us a call at: <span style="color: #383;">###</span>
    </p>
</div>
</asp:Content>

以上是我的原始代码，其中两个图像（邮件和手机）与文本顶部对齐，我需要它们中间对齐。

我试过<img src="images/mail32x32.png" alt="Mail" style="vertical-align:middle;" />但没有运气。我认为可能是父div的东西，所以我创建一个新的，相同的结果。

有人可以查看代码并查看错误吗？

Answer 1

你走了。您的保证金设置了全方位保证金，推动您的图像下降。我将顶部和底部边距设置为0，这样您的图像就会保持在中间位置。

div#content img {
    float: left;
    margin: 0 4px 0 4px;
    vertical-align:middle;
}

使用CSS问题垂直对齐图像旁边的文本

1 个答案: