分區大於集中後的內容

經過1小時的嘗試和錯誤，並尋找這樣的問題，我嘗試在這裏得到答案。分區大於集中後的內容

我想將一個引導程序Nav-Bar包含到Div中。我集中了導航欄，但現在我的Div比內容更高。此問題僅在導航欄居中時可用。如果我讓它向左浮動，Nav-Bar下方的空間不存在。

我認爲它有事情做與

ul{  
    display: inline-block; 
}

那我有什麼。

Menu centered but to much space below

這就是我想要的，只是居中：

No space below but centered left

希望你能幫助我:)

來源

2015-06-17 Kjarudi

'的#header {高度：50像素;} ' – madalinivascu

歡迎來到Stack Overflow！尋求調試幫助的問題（「爲什麼不是這個代碼工作？」）必須包括所需的行爲，特定的問題或錯誤以及在問題本身**中重現**的最短代碼。請參閱[**如何創建一個最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

使用vertical-align: top;在.nav希望這將解決您的問題

updated working code

來源

2015-06-17 11:21:14

好。這正是我需要的，因爲我不想給頭一個高:) – Kjarudi

嘗試加入高度頭：#header {height:50px;}

http://codepen.io/anon/pen/KpvJRo

來源

2015-06-17 11:14:39 madalinivascu

試試這個：http://jsfiddle.net/m28mzk11/1/

.nav-pills{ 
    display:table; 
    margin:0 auto; 
}

來源

2015-06-17 11:16:13 gopalraju

nav ul { 
    display: table; 
    margin: 0 auto; 
    width: /* Set your width here */ 
} 

nav ul li { 
    display: table-row; 
    text-align: center; 
}

這應圍繞你的文字，讓你立寬度被全自動計算

來源

2015-06-17 11:17:55

我在你的代碼中做了一個簡單的更正。

.nav-pills 
{ 
    text-align: center; 
} 
.nav-pills li 
{ 
    display: inline-block; 
    *display: inline;zoom: 1; 
    vertical-align: middle; 
    float: none; 
}

*顯示：內聯;縮放：1

被使用，因爲甚至申請IE7瀏覽器因爲IE7不支持顯示：內聯塊

來源

2015-06-17 11:22:13

分區大於集中後的內容

回答

相關問題