HTML 5 中的徽标和标题垂直居中答案

【问题标题】：Vertically center logo and title in HTML 5HTML 5 中的徽标和标题垂直居中
【发布时间】：2014-06-29 05:04:19
【问题描述】：

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

当我尝试在不使用 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);
}

【问题讨论】：

你能给我们一张你想要什么布局的截图吗？
docs.google.com/file/d/0B1iZMFQ0TNChRVlQaC1hLWlCN2s/…
您可能会考虑以不同的方式编写未来的标题。您实际上有一个关于 HTML 和 CSS 的特定主题问题，但您的标题听起来像是一个离题/非建设性问题。

标签： css html responsive-design html-head

【解决方案1】：

要将文本垂直居中添加line-height: 60px:

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

要使图像垂直居中，请更改顶部的边距：

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

这是一个working JSFiddle。

【讨论】：