css - HTML 5 中的垂直居中 Logo 和标题

Question

我正在尝试创建我的投资组合网站的响应式版本，并将我的 Logo 图像和标题嵌套在 header 标签中。旧版本使用 div 将 Logo 和标题 float 在页眉的左右两侧。

这就是我在不使用 divs 的情况下尝试分隔 img 和 h1 时遇到的问题。 标题位于右上角，但我不知道如何在不使用旧方法的情况下将 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 .