Trying to position my image a little bit lower, but it drags everything down with it.

Question

I'm trying to position my picture a little bit lower so the center of the image aligns with the vertical center of the header tag.

Here is the both the HTML and the CSS. Thanks for the help!

#articlesummary
{
    border: 2px solid red;    
    width: 750px;
}

#articlesummary h3
{
    border: 2px solid red;
    display:inline;
    color: #4292C6;    
    font-family: Verdana;
}

#articlesummary img
{   
    width:30px; 
    border: 1px solid red;
    margin-top: 5px;   
}

.submissionowner
{
    color: Gray;
}

<% foreach (var article in Model) { %>
<div id="articlesummary">
    <h3><%: article.Title %></h3>
    <sub class="submissionowner">Submmited by: <%: article.SiteUser.Login %></sub>
    <img src="../../Content/anonymous.png" alt="Anonymous user." />
    <p><%: article.Body %></p>
    <sub>Views:<%: article.TotalViews %> | Rating: <%: article.TotalRating %></sub>
</div>    
<% } %>

Thanks a bunch for any help!

Answer 1

Try to vertical-align: middle your img... like this: http://www.w3schools.com/css/pr_pos_vertical-align.asp

Sorry, wrong link/property posted

Your img class will look like this:

#articlesummary img
{   
    width:30px; 
    border: 1px solid red;
    margin-top: 5px;   
    vertical-align: middle;
}