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

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!

alt text

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

htmlcssasp.net-mvc-2image


Solution 1:[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;
}

Solution 2:[2]

You can try to use a <br /> tag, it will lower it, but maybe too low.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Nathan Tuggy

Related Questions