当位置:固定时,如何将DIV浮动在屏幕中央?

时间:2012-06-21 18:48:35

标签: html css css3

我指的是This Website

上的红丝带横幅

现在,当未设置此代码的位置有效时,使其居中对齐。

margin: 0 auto 30px;

但是当我向下滚动并使用JS制作div position:fixed时,相同的代码将不起作用!即使屏幕分辨率/浏览器不断变化,我该怎么做才能使它居中对齐?

3 个答案:

答案 0 :(得分:2)

试试这个:

{
 position:fixed;
 left:50%;
 margin-left:470px;

}

这里是使用chrome开发人员工具调试后的屏幕截图链接: https://dl.dropbox.com/u/19982181/Screen-Shot-2012-06-22-at-12.35.jpg

在你的window.scroll函数中更改此内容。

$('#socio').css({
"position":"fixed",
"margin-left":"-470px",
"top": "27px",
"left": "50%"
});

答案 1 :(得分:0)

因为页面上的元素得到了

margin-left: XXXpx;
向下滚动时

这是通过JS完成的,我猜它只是通过jQuery的.offset()=>来测量左浏览器边框和元素本身之间的宽度。 http://api.jquery.com/offset/

编辑:就个人而言,我也更喜欢SVS的答案,但这仅在您知道元素的宽度时才有效。

答案 2 :(得分:0)

试试这段代码:

margin-right: auto;
margin-left: auto;