不管理定位（並排側）

我有以下小提琴：http://jsfiddle.net/BFSH4/不管理定位（並排側）

正如你看到的有兩個問題：

的H1和H2沒有垂直對齊。
導航和內容不是海茲alligned。

對於1.我已經嘗試過保證金和填充。沒有成功...

第二個也不是那麼容易的浮動和使用inline-block的不工作的常用方法...

我在做什麼錯？

我終於管理浮動標題。問題在於hgroup不是塊元素。然而，即使它工作，我認爲最好使用真實圖像作爲企業名稱和口號。

現在只有水平對齊的問題失敗。

我不知道爲什麼： http://jsfiddle.net/BFSH4/2/

我可以做我想做的是沒有辦法，他們wan't並排是一面！

來源

2012-06-13 bodokaiser

解決方案爲您的第一個問題（found here）：

HTML

<div class="header"> 
    <span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup> 
</div>

CSS

.header { 
    height: 160px; 
    border: 1px solid #8a2be2; 
    /* text-align: center; */ 
} 

.header span { 
    height: 100%; 
    vertical-align: middle; 
    display: inline-block; 
} 

.header img { 
    display: inline-block; 
    height: 160px; 
    float: left; /* added, so the image will appear left to the text correctly */ 
} 

.header hgroup { 
    margin: 0;   
    vertical-align: middle; 
    display: inline-block; 
}

這個解決方案取決於display: inline-block

解決方案的第二個問題：

.nav { 
    width: 229px; 
    display: block; 
    margin: 0 auto; 
}

現場演示：http://jsfiddle.net/BFSH4/4/

來源

2012-06-13 16:07:33

http://jsfiddle.net/BFSH4/1/嗨，我想在您選擇的鏈接，但我提到的方法不知道我可以垂直對齊+水平對齊圖像。兩者結合失敗....我不知道你想告訴我關於第二個問題。 li與.nav和.content容器的水平對齊有什麼關係？ – bodokaiser

最後更正了我的答案：http://jsfiddle.net/BFSH4/4/希望這對你有用。 –

不管理定位（並排側）

回答

相關問題