垂直居中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

回答