垂直居中div

我想在此頁面上的子菜單的兩條線之間垂直居中。垂直居中div

看到一個寫着總體規劃的組成部分|公園...等我想用jquery來居中。有誰知道如何？

編輯：菜單可以不止一行。

感謝

傑森

2011-03-03 Jason

爲什麼你需要JQ做到這一點。爲什麼不用CSS {{text-align：center;}' – s84 2011-03-03 02:07:04

對不起。我想要這裏的垂直中心，而不是水平中心。 – Jason 2011-03-03 02:10:44

菜單可能超過1行，所以行高可能會導致問題，因此jquery。 – Jason 2011-03-06 03:08:01

的CSS line-height正好被設置爲一個固定值：http://jsfiddle.net/simevidas/yHJjx/

2011-03-03 02:13:16

設置行高等於包含元素的高度將垂直居中文本，但是您應該記住，如果文本溢出到兩行（例如，用戶具有文本縮放），您的佈局將打破，一半文字將會丟失。 – Moses 2011-03-03 02:15:17

@Moses ...只有容器元素具有高度集。如果只設置行高，那麼容器的高度將基於行高，如果文本溢出到第二行，容器將增長以包裝兩行。 – 2011-03-03 02:19:12

@ŠimeVidas，但你的佈局仍然中斷 – 2011-03-03 02:26:49

您可以設置CSS屬性 '的line-height' 適當的內容，使其垂直中心，只是試一試

2011-03-03 02:15:35

從我能告訴你想要在一個固定的高度區域中心元素？您最好只添加一個頂部邊距以便向下拉取導航並相應地調整高度屬性。

此外，當您縮小瀏覽器窗口時，導航也會離開屏幕。編號考慮添加一個容器div與你以後的固定寬度和邊緣自動居中。稍微偏離主題，但應該讓你的元素更易於管理。

2011-03-03 02:22:22 sweetroll

菜單長兩行時會發生問題。感謝您的其他建議，但好點。 +1 – Jason 2011-03-07 00:33:48

從您的#navigation ID中刪除頂部填充並添加一個line-height:120px。你不需要這個jQuery。

#navigation { 
height:120px; 
line-height:120px; 
padding:0 1em 0 0; 
width:720px; 
}

2011-03-03 04:16:15 Hussein

嘿夥伴，問題是菜單可以延伸到兩行。有沒有辦法用線高來解釋這一點？ – Jason 2011-03-06 03:07:23

@jason你不應該讓你的菜單延伸到2行。不是一個好習慣。如果你需要有兩條線，那麼你需要採取不同的方法來佈置你的模板。爲了這個問題的目的將解決你的問題。 – Hussein 2011-03-06 03:18:19

大聲笑，「不是一個好習慣」......這有點隨意。你有一些文件來支持嗎？ +1的努力，但不幸的是我不能接受這個答案，因爲我特意要求javascript。 – Jason 2011-03-07 00:33:13

我放棄了並使用了表格。

但行高一點的伎倆，看到上面回答

2011-03-08 00:26:09 Jason

回答