垂直居中 div答案

【问题标题】：Vertically centre a div垂直居中 div
【发布时间】：2011-07-07 17:51:25
【问题描述】：

我想将该页面上的子菜单垂直居中在两行之间。

参见总体规划 |公园...等。我想用 jquery 来集中它。有人知道怎么做吗？

编辑：菜单可以多于一行。

谢谢

杰森

【问题讨论】：

【解决方案1】：

我放弃并使用了桌子。

但线高的东西起到了作用，请参阅上面的答案

【讨论】：

【解决方案2】：

从您的 #navigation id 中删除顶部填充并添加 line-height:120px。为此，您不需要 jQuery。

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

【讨论】：

嘿伙计，问题是菜单可以延伸到两行。有没有办法用线高来解决这个问题？
@jason 你不应该让你的菜单延伸到 2 行。不是一个好习惯。如果您需要 2 行，那么您需要采用不同的方法来布置您的模板。为了这个问题的目的，将解决您的问题。
大声笑，“不是一个好习惯”......这有点随机。你有一些文件支持吗？ +1 的努力，但不幸的是我不能接受这个作为答案，因为我特别要求使用 javascript。

【解决方案3】：

据我所知，您希望将元素置于固定高度区域的中心？你最好只添加一个上边距来压低导航并相应地调整高度属性..

此外，当您缩小浏览器窗口时，您的导航也会离开屏幕。我会考虑添加一个具有您所追求的固定宽度的容器 div，并将边距自动居中。稍微偏离主题，但它应该使您的元素更易于管理。

【讨论】：

【解决方案4】：

只需将 CSS line-height 设置为固定值：http://jsfiddle.net/simevidas/yHJjx/

【讨论】：

将 line-height 设置为包含元素的高度将使文本垂直居中，但是您应该记住，如果文本溢出到两行（例如用户放大了文本）你的布局会中断，一半的文本会丢失。
@Moses ...仅当容器元素设置了高度时。如果只设置 line-height，那么容器的高度将基于 line-height，如果文本溢出到第二行，容器将增长到包裹两行。
@Šime Vidas，但您的布局仍然中断
@Šime 我的评论与 Moses 的评论有关 - 如果文本换行成两行，行高将导致两行之间出现很大的间隙，而不是居中。
天哪，原来如此简单。谢谢！

【解决方案5】：

您可以将css属性'line-height'设置为适当的内容，使其垂直居中，试一试

【讨论】：