使用固定元素居中页面

时间:2011-06-21 12:37:17

标签: jquery

我的网站有3个问题(希望这不是作弊!:p)我正在构建(顺便使用Wordpress ......)

我正在努力实现一些相当简单的事情,但事实证明它有点棘手。在我的这个页面上{www.ashleymosuro.com/newsite)我左边有一个固定的导航栏,它不会与其他元素一起滚动。

然而,我最想要的是将整个页面置于中心,或者至少是包含所有内容的主要包装器。我之前设法做到了这一点,但每当我调整页面大小时,包装器将向左移动,允许导航重叠。我希望导航与包装器保持相同的距离,但无论页面是否调整大小,都要将其全部居中。

我的另一个问题是我目前在网站上有一个水平滚动条,好像页面右侧有更多内容。我认为这是一个浮动问题?

一旦到达页脚div,我也希望我的固定导航到做某事。我知道这可以用jQuery,但不完全确定如何实现它。我想我需要以某种方式在导航中仅在与页脚碰撞时添加一个类,但是当用户向上滚动时它需要删除此类。

非常感谢帮助!

谢谢,

阿什利

1 个答案:

答案 0 :(得分:0)

你应该能够通过给它一个绝对位置来居中任何div,其左值为50%,左边缘像素值为div宽度的像素维度的一半。

所以如果你有一个宽度为955像素的div,为了使它居中,你会给它一个绝对位置,左边值为50%,左边缘值为-477.5,它应该保持居中,无论如何。

对于水平滚动条,您应该将正文的像素尺寸设置为宽度和高度的100%,这样您的页面将调整为用户分辨率。