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

这是 working JSFiddle 。