Пытаюсь расположить мое изображение немного ниже, но оно затягивает все

Question

Я пытаюсь расположить картинку немного ниже, чтобы центр изображения совпадал с вертикальным центром тега заголовка.

Здесь представлены HTML и CSS. Спасибо за помощь!

#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>    
<% } %>

Большое спасибо за любую помощь!

Answer 1

Попробуйте выровнять по вертикали: отредактируйте ваш img ... вот так: http://www.w3schools.com/css/pr_pos_vertical-align.asp

Извините, неправильная ссылка / свойство опубликовано

Ваш img класс будет выглядеть так:

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

Answer 2

Вы можете попробовать использовать тег <br />, он понизит его, но, возможно, слишком низкий.