垂直中心徽標和標題在HTML 5

我想創建我的投資組合網站的響應版本，我嵌套的標題標籤內我的標誌形象和稱號。較舊的版本使用div來將徽標和標題浮在標題的左側和右側。垂直中心徽標和標題在HTML 5

這裏是我被困在當我試圖將空間img和h1而不使用divs。標題放置在右上角，但我不知道如何垂直居中既img和h1不使用老方法。

佈局截至目前

Current Layout

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

來源

2014-03-30 user3424278

你能給我們一個你想要的佈局的截圖嗎？ –

https://docs.google.com/file/d/0B1iZMFQ0TNChRVlQaC1hLWlCN2s/edit?hl=en&forcehl=1 – user3424278

你可能會考慮寫不同的未來的遊戲。你實際上有一個關於你的HTML和CSS的特定的主題問題，但是你的標題聽起來像是一個脫離主題/沒有建設性的問題。 –

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

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

垂直居中的圖像，更改頁邊距在最前面：

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

這裏是一個working JSFiddle。

來源

2014-03-30 22:26:06

垂直中心徽標和標題在HTML 5

回答

相關問題