Question

I’ve been following every tip that I’ve found in the web but… I haven’t make it work 🙁

this is a part of my 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; }

I have a Master Page and my content place holder is just the content div (not the aside), now the html is us follows:

<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>

the above is my original code, in which both images (mail and phone) are top aligned with the text, and I need them middle aligned.

I’ve tried <img src="images/mail32x32.png" alt="Mail" style="vertical-align:middle;" /> but no luck. I thought could be something with the parent div, so I create a new one, same result.

Could someone look into the code and check what is wrong?

Answer 1

Here you go. Your margin was setting an all around margin, pushing your images down. I set the top and bottom margin’s to 0 so your image would stay in the middle.

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