Вертикально по центру логотип и заголовок в HTML 5

Question

Я пытаюсь создать адаптивную версию своего веб-сайта портфолио и вкладываю изображение логотипа и заголовок в тег заголовка. Старая версия использовала div для размещения логотипа и заголовка слева и справа от заголовка.

Вот где я застрял, когда я пытался разместить img а также h1 без использования divs, Заголовок находится в правом верхнем углу, но я не знаю, как по центру img а также h1 без использования старых методов.

Макет по состоянию на сейчас

HTML

<header>
    <img src="images/logo.png" width="203" height="41" alt="logo for Design415.com" class="logo">
    <h1 class="pagetitle">PORTFOLIO TITLE</h1>
</header>

CSS

header {
    position: relative;
    width: auto;
    max-width: 900px;
    height: 60px;
    margin: 0 auto 20px auto;
    background-color: #333333;
    overflow: hidden;
}

.logo {
    position: absolute;
    left: 0;
    margin: 0;
}

.pagetitle {
    position: absolute; 
    right:0; 
    font-family: 'Century Gothic', Helvetica, sans-serif; 
    font-size: 1.40em; 
    font-weight: bold;
    margin: 0;
    color: rgb(240, 240, 240);
}

Answer 1

Чтобы центрировать текст по вертикали, добавьте line-height: 60px:

.pageTitle {
    // Your styles here
    line-height: 60px;
}

Чтобы центрировать изображение по вертикали, измените поле сверху:

.logo {
    // Your styles here
    margin-top: 9px;
}

Вот рабочий JSFiddle.